Vue基础入门篇学习总结

文章目录

1.Vue引言

2.Vue入门

2.1 下载或引入Vue

2.2 Vue第一个入门应用

3.v-text和v-html

3.1v-text

3.2v-html

4.vue中事件绑定(v-on)

4.1 绑定事件语法 v-on

4.2 Vue2中事件的简化写法

4.3 Vue事件函数的两种写法

4.4 Vue事件的参数传递绑定

4.5事件小案例

5.v-show v-if v-bind 指令

5.1 v-show

5.2 v-if

5.3 v-bind

5.4 v-bind简化写法

6.v-for的使用

7.v-model 双向绑定Vue 记事本综合案例

8. 事件修饰符

8.1 stop事件修饰符

8.2 prevent事件修饰符

8.3 self事件修饰符

8.4 once 事件修饰符

9.按键修饰符

1.Vue引言

# 渐进式易用 html css javascript高效 开发前端页面 非常高效灵活 开发灵活 多样性# 总结Vue是一个JavaScript框架# 后端服务开发人员Vue是渐进式Javascript框架：让我们通过操作很少的DOM，甚至不需要操作页面中的任何DOM元素，就很容易完成数据和视图绑定 双向绑定 MVVM注意：在使用Vue过程中不要在引入jquery框架Vue作者 => 尤雨溪(国内)

2.Vue入门

<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script> //定义对象 数组 其他数据类型<span>msg:{{msg.toUpperCase()}}</span><br>//取值时书写表达式<span>名称：{{user.name}} 信息：{{user.msg}}</span><br><span>age:{{age}}</span><br><span>地址：{{lists[0]}} {{lists[2]}}</span><br><span>{{users[1]}}<br><hr> {{users[0].name}}</span><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{msg:"hello vue",user:{name:"lemon",msg:"success"},age:19,lists:["河南郑州1","江苏苏州2","浙江杭州3"] ,//数组类型users:[{name:"tizi",age:18},{name:"zxt",age:21}] //数组装对象}})</script>

# 总结
1. vue实例（对象）中el属性：代表Vue的作用范围内都可以使用Vue语法
2. vue实例（对象）中data属性： 用来给Vue实例绑定一些相关数据，绑定的数据可以通过 {{变量名}}在vue作 用范围内取出 
3. 在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式、运算符，调用相关方法，以及逻辑运算等
4. el 属性中可以书写任意的css选择器[jquery选择器]，在使用Vue开发是推荐 id选择器

3.v-text和v-html

# 总结{{zhi}} (插值表达式 ) 和 v-text 获取数据的区别在于a. 使用v-text取值会将标签中原有的数据覆盖 使用插值表达式不会覆盖标签原有的数据b.使用v-text可以避免在网络环境较差的情况下出现差值闪烁(谷歌浏览器清缓存 network/3Gslow可看到) <span v-text="message">zhi</span><br><span v-html="message">zhi</span><br><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"<a href=\"\http://**.baidu.com\"\>点击去百度页面</a>"//链接可单斜杠}})</script>

4.vue中事件绑定(v-on)

# 总结事件源：发生事件dom元素 事件：发生特定的动作 监听器：发生特定动作之后的事件处理程序 通常是js函数1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如：v-on:click2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名3.在vue中事件的函数统一定义在vue实例的methods属性中4.在vue定义的事件中this指的就是当前vue的实例，以后可以在事件中通过this获取vue实例中相关数据 <h3>age:{{age}}</h3><br><input type="button" value="v-on 事件年龄+1" v-on:click="alterage()"/><br><input type="button" value="@简化v-on年龄-1" @click="editage()"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据age:18},methods: { //methods：用来定义vue事件处理函数alterage:function(){this.age++;},editage:function(){this.age--;}}})</script> **总结 ** 以后在vue中绑定事件时可以通过@符号形式 简化v-on的事件绑定 <h3>{{count}}</h3><br><input type="button" value="count+1" @click="changeCount()"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据count:1},methods: { //methods：用来定义vue事件处理函数//两种函数写法// changeCount:function(){//写法1// this.count++;// },changeCount(){//写法2this.count++;}}})</script> 总结 在Vue中事件定义存在两种写法，推荐第二种 1、函数名:function( ){ } 2、函数型( ){ } <h3>{{count}}</h3><br><input type="button" value="改变count为指定值" @click="changeCount(66,'柠檬')"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据count:1},methods: { //methods：用来定义vue事件处理函数changeCount(count,name){ //定义参数this.count= count;this.name = name;alert(name);}}})</script> 总结 在使用事件时，可以直接在事件调用出事件进行参数传递，在事件定义出通过定义对应变量接收传递的参数 <input type="button" value="-" @click="subtract()"/><h2>{{count}}</h2><input type="button" value="+" v-on:click="addition()"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据count:1},methods: { //methods：用来定义vue事件处理函数addition:function(){if(this.count<10){this.count++;}else{alert("不能在增加啦");}},subtract(){if(this.count>1){this.count--;}else{alert("不能在减少啦");}}}})</script>

5.v-show

v-if v-bind 指令

<h2 v-show="count>19">提先森公众号</h2><input type="button" value="修改count 15->20值控制标签展示" @click="showCount"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据count:15},methods: { //methods：用来定义vue事件处理函数//定义事件showCount(){this.count++;console.log(this.count);}}})</script> 总结 1.在使用v-show时可以直接书写boolean值控制元素展示，也可以通过变量控制标签展示和隐藏 ? 2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

<h2 v-if="false">提先森 微信公众号 false</h2><h2 v-if="show">提先森 微信公众号 true</h2><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据show:true}})</script>

5.3 v-bind

<style type="text/css">.icss{border:2px pink solid;}</style><img class="img" v-bind:title="msg" v-bind:class="{icss:showCss}" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2628255422,2996456624&fm=11&gp=0.jpg" ><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据msg:"girl头像",showCss:true},})</script>

5.4 v-bind简化写法

<style type="text/css">.icss{border:2px blue solid;}</style><img :title="msg" :class="{icss:showCss}" :src="src" ><br><input type="button" value="动态控制加入样式" @click="addCss"/><input type="button" value="改变图片" @click="alterImg"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据msg:"girl头像",showCss:true, src:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2628255422,2996456624&fm=11&gp=0.jpg"},methods:{addCss(){this.showCss = !this.showCss;},alterImg(){this.src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=625539366,953418167&fm=11&gp=0.jpg";}}})</script>

6.v-for的使用

<span v-if="false">{{user.name}} {{user.age}}</span><!-- v-for遍历 --><span v-for="u in user">{{u}}<br><!-- v-for遍历对象 --><span v-for="(value,key,index) in user">{{index}} : {{key}} : {{value}}</span><!-- v-for遍历数组 --><ul v-for="a,index in arr"><li>{{index}} {{a}}</li></ul><br><!-- v-for遍历数组中的对象 --><ul v-for="user,index in users" :key=user.age style="list-style-type: none;"><li>{{index+1}} {{user}}</li></ul><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据user:{name:"zxt",age:21},arr:["河南","江苏","上海"],users:[{name:"lemon1",age:21,msg:"背起了行囊 远离family"},{name:"lemon2",age:22,msg:"踏上路途的这一刻，我知道终将不平凡"}]}})</script>

总结 在使用 v-for的时候一定要注意加入 :key 用来绑定给vue内部提供重用和排序的唯一key

7.v-model 双向绑定

# v-model总结 1、使用v-model指令可以实现数据的双向绑定2、所谓双向绑定，表单中数据变化导致vue实例data数据变化，vue实例中data数据的变化导致表单中的数据变化，称之为双向绑定# MVVM架构 双向绑定机制Model： 数据 Vue实例中绑定数据VM ： ViewModel 监听器View： 页面 页面展示的数据 Vue 记事本综合案例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>记事本综合案例</title></head><body><!-- 实现思路1.完成记查询所有思路：
①酱所有的数据绑定为vue实例 
②遍历vue实例中数据到页面
2.添加 
①添加按钮绑定事件 
②在事件中获取输入框中的数据 
③将获取到的数据放入到arrs中 
3.删除 删除所有 总数量--><input type="text" v-model="msg" placeholder="请输入添加内容"/><input type="button" value="添加记事" @click="save"/><ul><li v-for="item,index in arrs">{{index+1}}- {{item}} <a href="javascript:;" @click="delRow">删除</a></li></ul><br><span>总记录： {{arrs.length}} 条</span> <input type="button" v-show="arrs.length!=0" value="删除所有" @click="delAll"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据arrs:["踏上路途的那一刻","我知道终将不平凡"],msg:"",},methods: { //methods：用来定义vue事件处理函数save(){//添加记事本console.log(this.msg);//log文本框的数据this.arrs.push(this.msg); //向列表中添加当前双向绑定的值this.msg='';//添加值后清空文本框的值},delRow(index){//删除一条记录//根据下标删除数组的某个元素this.arrs.splice(index,1); //参数1：从哪个下标开始删 参数2：删除几个元素},delAll(){//删除所有数据this.arrs=[];}}})</script> </body></html>

效果图如下

8. 事件修饰符

# 常用事件修饰符.stop.prevent.capture.self.once.passive

8.1 stop事件修饰符

<style type="text/css">.sty{background-color: pink;width: 300px;height: 300px;}</style><button type="button" @click.stop="btnClick">按钮</button><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据},methods: { //methods：用来定义vue事件处理函数btnClick(){alert("button被点击");},divClick(){alert("div被点击");}}})</script>

8.2 prevent事件修饰符

<!-- .prevent用来阻止事件的默认行为 --><a href="http://**.baidu.com" @click.prevent="aClick">去百度</a>

8.3 self事件修饰符

<!-- .self 只触发标签自身的事件 --><!-- .stop用来阻止事件的冒泡 --><button type="button" @click.stop="btnClick">按钮</button><button type="button" @click="btnClick1">按钮1</button><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据},methods: { //methods：用来定义vue事件处理函数btnClick(){alert("button被点击");},divClick(){alert("div被点击");},btnClick1(){alert("btnClick1点击");}}})</script>

8.4 once 事件修饰符

once 让事件只触发一次，第二次则失效会执行事件或标签的默认方法

<!-- .prevent :用来阻止事件的默认行为.once :用来只执行一次的特定事件，设置后click只生效一次，第二次直接会触发a标签 

--><a href="http://**.baidu.com" @click.prevent.once="aClick">去百度</a>

9.按键修饰符

按键修饰符官网介绍

用来与键盘中按键事件绑定在一起，用来修饰特定的按键事件的修饰符 .enter

.tab.delete (捕获“删除”和“退格”键).esc.space

.up.down.left

.right

<input type="text" v-model="msg" @keyup.enter="keyups"/><hr ><input type="text" v-model="msg" @keyup.delete="keydelete"/><!-- 引入在线cdn的vue.js地址--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app", //element：用来指定vue作用范围data: { //data：用来定义vue实例相关数据msg:[],},methods: { //methods：用来定义vue事件处理函数keyups:function(){alert(this.msg);},keydelete(){alert("Delete键触发");}}})</script>

9.2 delete键 用来捕获到delete键执行到当前的标签才会触发 ↑ 按键修饰符 需要什么键定义事件，可以自己设定vue基础入门篇总结到此基本结束。

文档下载

Vue基础入门篇学习总结.doc