Vue初识
Vue
Vue是一套用于构建用户界面的渐进式框架，可以设计成自底而上的逐层应用，它只关注图层
Vue基本指令：v-
v-text ，v-html，v-cloak
v-bind：------>简写为：
v-on：--------->简写为@
v-for（注意key的使用）
v-if，v-show
v-model
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <p v-cloak>++++{{msg}}----</p> <!--{{}}：vue 的内容渲染到页面中的指令--> <p v-text="msg">======</p> <div v-html="msg2">+++++</div> <!-- 使用{{}}时,页面加载时会先显示{{}}，然后再渲染，会产生页面闪烁 --> <!-- v-cloak 配合display:none可以防止页面闪烁 --> <!-- v-text 默认不会闪烁，但会覆盖标签内容 --> <!-- v-html 默认不会闪烁，可以识别标签名，添加标签 ，也会覆盖标签原本的内容 --> <input type="button" value="按钮" v-bind:title="mytitle + '123'"> <!-- v-bind:是用于提供属性绑定的指令，它可以使得标签的属性动态的获取到属性值 --> <!-- v-bind: 可以简写成 : ,它可以让普通的属性值和Vue中定义的属性值结合使用 --> <input type="button" id="btn" v-on:click="show"> <!-- v-on:提供事件绑定的指定,可以简写成 @，绑定的事件可是Vue中methods中的函数 --> <input type="text" v-model="msg"> <!-- v-model 可以实现表单元素合model中数据双向绑定，双方任意一个改变，另一个也会变化 --> <!-- 注意只适用于表单元素 --> <p v-for="(item,i) in ls">索引：{{i}},值：{{item}}</p> <p v-for="count in 10">{{count}}</p> <!-- v-for 循环遍历 --> <input type="button" value="按钮" @click="flag=!flag"> <p v-if="flag">这个是v-if控制的</p> <p v-show="flag">这个是v-show控制的</p> <!-- v-if 每次都会将元素重建或删除 --> <!-- v-show 每次是将display变成none，而不会重新创建或删除,--> <!-- 注意如果style样式中设置了display：none，即使通过if，show改成true也不会显示，不会覆盖默认样式 --> </div> <script src="vue-dev/dist/vue.js"></script> <script> var vm = new Vue({ el : "#app", //表示new的Vue需要控制的区域 data : { //data属性存放实例Vue所有的属性数据 msg: "welcome vue", //通过Vue提供的指令，可以方便的将数据渲染到页面上，而不用操作DOM msg2:"<h1>我是一个h1标签</h1>", mytitle: "自定义的", ls: [1,2,3,4,"ss","yy"], flag:true }, methods:{ //methods定义当前实例Vue的所有方法 show:function (){ alert("Hello") } } }); </script> </body> </html>
v-for中key的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-dev/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="textId"> <input type="text" v-model="textName"> <input type="button" value="添加" @click="add"> <!--使用v-bind指定key值，使得选中之后不会因为在前面添加值而改变勾选位置，注意key属性值只能使用number，string--> <p v-for="item in ls" :key="item"> <input type="checkbox">{{item.id}}-----{{item.name}}---{{item}} </p> </div> <script> var vm = new Vue({ el : "#app", data : { textId:"", textName:"", ls:[ {id:1,name:"ss"}, {id:2,name:"yy"}, {id:3,name:"zz"} ] }, methods : { add : function () { this.ls.unshift({id:this.textId,name:this.textName}) } } }) </script> </body> </html>
事件符
.stop 阻止事件冒泡
.prevent 阻止标签默认行为
.captrue 事件捕获触发
.self 自身被触发，不受事件冒泡影响
.once 只触发一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-dev/dist/vue.js"></script> </head> <body> <div id="app"> <div id="dv1" @click.capture="dv1Handler"> <input type="button" value="按钮" id="btn" @click.stop="btnHandler"> <!-- .stop 阻止事件冒泡 --> <!-- .capture 事件捕获触发，捕获：从外到里依次显示 --> </div> <a href="http://www.baidu.com" @click.once.prevent="aClick">百度</a> <!-- .prevent 阻止标签的默认行为 --> <!-- .once 只触发一次 --> <div id="dv2" @click.self="dv1Handler"></div> <!-- .self 只有点击到自身才会触发，不会因为事件冒泡而触发，注意只会阻止自身不受冒泡影响 --> </div> <script> var vm = new Vue({ el : "#app", data : { }, methods : { dv1Handler : function(){ console.log("this is dv") }, btnHandler : function(){ console.log("this is btn") }, aClick : function () { console.log("this is a") } } }) </script> </body> </html>
给标签添加样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-dev/dist/vue.js"></script> <style> .red { color: red; } .thin { font-size: 20px; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <p :class="['red','italic']">这是第零个p标签</p> <!-- 当用Vue指令v-bind进行属性绑定时，使用数组的方式传递class样式 --> <p :class="['red',flag?'active':'']">这是第一个p标签</p> <!-- 使用v-bind属性绑定时，数组中可以使用三元表达式判断是否添加样式 --> <p :class="['red',{'active':flag}]">这是第二个p标签</p> <!-- 也可以使用对象{}方式代替三元表达式 --> <p :class="{'red':true,'thin':false,'active':true}">这是第三个p标签</p> <!-- 直接使用对象键值对添加class样式 --> <p :style="{'color':'red','font-size':'20px'}">这是第四个p标签</p> <!-- 使用v-bind指令直接绑定style样式属性 --> <p :style="[{'color':'red','font-size':'20px'},styleObj1]">这是第五个p标签</p> <!-- 可以使用数组方式，引用多个对象添加样式 --> </div> <script> var vm = new Vue({ el: "#app", data: { flag: true, styleObj1: {"font-style":"italic"} }, methods: {} }) </script> </body> </html>
过滤器的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-dev/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{msg | msgChange("淡然") | text}}</p> <!-- 过滤器使用管道符，后面处理前面，可以同时使用多个过滤器 --> </div> <script> //过滤器：格式：Vue.filter("过滤器名字"，处理函数)，函数的参数第一个固定为被处理的数据，即管道符前的那个变量 Vue.filter("msgChange",function (msg,arg) { return msg.replace(/单纯/g,arg) /*replace默认匹配第一个替换，通过正则的 g 全局匹配*/ }); // Vue.filter("text",function (msg) { // return msg + "哈哈" // }); var vm = new Vue({ el : "#app", data : { msg:"我是一个单纯的人，现在依旧是一个单纯的人，我心依旧单纯" }, methods : { }, filters : { /*自定义私有的过滤器*/ "text":function (msg) { return msg+"哈哈" } } }) </script> </body> </html>
自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-dev/dist/vue.js"></script> </head> <body> <div id="app"> <p v-color="'red'" v-font_weight="'1000'" v-fontsize="50">{{msg}}</p> <!--自定义指令可以传值，值是字符串--> </div> <script> /* * 定义全局指令 * 自定义指令：Vue.directive()，两个参数，第一个是指令名，第二个是一个对象，存放指令的相关钩子函数 * 参数1：指令名不用加 v- ，但标签调用时必须加上 v- 前缀 * 参数2：这个对象中的钩子函数的第一个参数必然是el，el代指被绑定的标签 * 钩子函数：bind，inserted，update * 注意：当定义的指令是一个行为，如v-focus获取焦点，只在bind中设置，是没有效果的 * 因为，在元素绑定这个指令时，它还没插入到DOM中去，当插入到DOM中，一些行为才会触发 * 因此需要在inserted中设置 * * */ Vue.directive("color",{ /* * * binding是一个对象，包含name，value，expression等 * binding.name 表示的是指令的名字 * binding.value 表示指令调用时传递的值，与expression不同，这个值是计算后的结果 * binding.expression 表示指令调用时传递的值的表达式，如v-color="'red'",得到的就是‘red’这个字符串 * */ bind:function (el,binding) { el.style.color = binding.value; }, inserted:function () { }, update:function () { } }); var vm = new Vue({ el : "#app", data : { msg:"自定义指令，钩子函数中的参数，el，binding" }, methods : { }, directives : { /*自定义私有的指令*/ "font_weight" : { /*指令名和对象*/ bind:function (el,binding) { el.style.fontWeight = binding.value; } }, "fontsize" : function (el,binding) { /*简写方式，相当于将函数写到bind和update中*/ el.style.fontSize = parseInt(binding.value) + "px" } } }) </script> </body> </html>
