Vue.js
Vue是一套用于构建用户界面的渐进式框架。
起步
引入vue
<head><script src="static/js/vue@2.6.12.min.js"></script> </head>创建vue应用
<body> <div id="index"><p>{{message}}</p> </div><script>const index = new Vue({el: "#index",data: {message: "消息"}}); </script> </body>
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
插值
文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
<body> <div id="index"><p>{{message}}</p> </div><script>const index = new Vue({el: "#index",data: {message: "消息"}}); </script> </body>
HTML
使用 v-html 指令用于输出 HTML代码
<body> <div id="index"><div v-html="html"></div> </div><script>const index = new Vue({el: "#index",data: {html:"<p>一个p标签</p>"}}); </script> </body>
属性
HTML 属性中的值应使用 v-bind 指令。
<body> <div id="index"><input type="checkbox" v-model="used"><!--被选中时 used=true --><div v-bind:class="{'class1':used}">属性</div><!-- used=true时，class=class1 --> </div><script>const index = new Vue({el: "#index",data: {used:false}}); </script> </body> <style>.class1{background-color: red;} </style>
表达式
<body> <div id="index"><p>{{1+1}}</p><p>{{ok?"OK":"NO"}}</p> </div><script>const index = new Vue({el: "#index",data: {ok:true}}); </script> </body>
指令
指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
<div v-html=""></div> <div v-bind:class="">属性</div> ...参数
参数在指令后以冒号指明。
<div v-bind:class="">属性</div> <a v-bind:href="">链接</a> ...修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<button @click.native="">按钮</button>
条件语句
v-if
<body> <div id="index"><div v-if="ok">{{ok}}</div><!--ok=true时显示true，否则不展示 --><div v-if="!ok">{{ok}}</div><!--ok=false时，显示false--> </div><script>const index = new Vue({el: "#index",data: {ok:false}}); </script> </body>v-else
<body> <div id="index"><div v-if="ok">{{ok}}</div><!--ok=true时显示true--><div v-else>{{ok}}</div><!--否则显示false--> </div><script>const index = new Vue({el: "#index",data: {ok:false}}}); </script> </body>v-else-if
<body> <div id="index"><div v-if="ok==='A'">A</div><div v-else-if="ok==='B'">B</div><div v-else-if="ok==='C'">C</div><div v-else>OTHER</div> </div><script>const index = new Vue({el: "#index",data: {ok:'X'}}); </script> </body>v-show
与v-if作用类似
<body> <div id="index"><div v-show="ok">A</div> </div><script>const index = new Vue({el: "#index",data: {ok:true}}); </script> </body>
循环语句
循环使用 v-for 指令。
迭代数组
<body> <div id="index"><ol><li v-for="item in list">{{item.key}}:{{item.value}}</li></ol> </div><script>const index = new Vue({el: "#index",data: {list: [{key: "key1", value: "value1"},{key: "key2", value: "value2"},{key: "key3", value: "value3"}]}}); </script> </body>
迭代对象
<body> <div id="index"><ol><li v-for="(value,key) in obj">{{key}}:{{value}}</li></ol> </div><script>const index = new Vue({el: "#index",data: {obj:{name:"aji",sex:"male",age:"24"}}}); </script> </body>
迭代整数
<body> <div id="index"><ol><li v-for="n in 10">{{n}}</li></ol> </div><script>const index = new Vue({el: "#index",data: {}}); </script> </body>
计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
computed
<body> <div id="index"><span>{{str}}</span><div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样--><div v-for="item in strSplit">{{item}}</div> </div><script>const index = new Vue({el: "#index",data: {str:"abcd"},computed:{strSplit:function (){return this.str.split('')}}}); </script> </body>methods
可以使用 methods 来替代 computed，效果上两个都是一样的
<body> <div id="index"><span>{{str}}</span><div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样--><div v-for="item in strSplit2()">{{item}}</div> </div><script>const index = new Vue({el: "#index",data: {str:"abcd"},methods:{strSplit2:function (){return this.str.split('')}}}); </script> </body>
样式绑定
class
可以在对象中传入多属性用来动态切换多个 class
<body> <div id="index"><span>红色背景<input type="checkbox" v-model="red"></span><span>大字体<input type="checkbox" v-model="big"></span><div v-bind:class="{'class1':red,'class2':big}">样式绑定class</div> </div><script>const index = new Vue({el: "#index",data: {red:false,big:false,}}); </script> </body> <style>.class1 {background-color: red;}.class2 {font-size: 40px;} </style>
style
可以在 v-bind:style 直接设置样式
<body> <div id="index"><button v-on:click="add()">{{fontSize}}+4</button><!--点击时触发add()方法，fontSize+4--><div v-bind:style="{fontSize:fontSize+'px'}">样式绑定class</div> </div><script>const index = new Vue({el: "#index",data: {fontSize: 12,},methods: {add: function () {this.fontSize += 4}}}); </script> </body>
事件处理器
事件监听可以使用 v-on 指令
<body> <div id="index"><button v-on:click="{fontSize++}">{{fontSize}}</button><button v-on:mousedown="color('yellow')" v-on:mouseup="color('pink')" v-bind:style="{backgroundColor:fontColor}">{{fontColor}}</button><button v-on:mouseover="color('yellow')" v-on:mouseout="color('pink')" v-bind:style="{color:fontColor}">{{fontColor}}</button> </div><script>const index = new Vue({el: "#index",data: {fontSize: 12,fontColor: "pink"},methods: {color: function (param) {this.fontColor = param}}}); </script> </body>
表单
可以用 v-model 指令在表单控件元素上创建双向数据绑定
输入框
<body> <div id="index"><div><input type="text" v-model="str"><p>{{str}}</p></div><div><textarea type="text" v-model="text"></textarea><p>{{text}}</p></div> </div><script>const index = new Vue({el: "#index",data: {str: '',text: ''}}); </script> </body>复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。
<body> <div id="index"><div><span>逻辑值<input type="checkbox" v-model="bool"></span><p>{{bool}}</p></div><div><span>数组<input type="checkbox" v-model="arr" value="A"><input type="checkbox" v-model="arr" value="B"><input type="checkbox" v-model="arr" value="C"></span><p>{{arr}}</p></div> </div><script>const index = new Vue({el: "#index",data: {bool: false,arr: [],}}); </script> </body>
单选按钮
<body> <div id="index"><div><span>A<input type="radio" v-model="single" value="A"></span><span>B<input type="radio" v-model="single" value="B"></span><span>C<input type="radio" v-model="single" value="C"></span><p>{{single}}</p></div> </div><script>const index = new Vue({el: "#index",data: {single:'',}}); </script> </body>
select列表
<body> <div id="index"><select v-model="select"><option value="">请选择</option><option value="A">A</option><option value="B">B</option><option value="C">C</option></select><p>{{select}}</p> </div><script>const index = new Vue({el: "#index",data: {select: '',}}); </script> </body>
组件
组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。
全局组件
<body> <div id="index"><aji></aji><!--使用全局组件--> </div><script>Vue.component('aji',{template:'<div>自定义组件aji</div>'}) //注册全局组件const index = new Vue({el: "#index",data: {}}); </script> </body>局部组件
<body> <div id="index"><aji></aji><!--使用全局组件--> </div><script>const index = new Vue({el: "#index",components: {'aji': {template: '<div>自定义组件aji</div>'}},data: {}}); </script> </body>Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
<body> <div id="index"><aji msg="prop传参"></aji><!--全局组件中使用prop--> </div><script>Vue.component('aji', {props: ['msg'],template: '<div>自定义组件aji,传参为:{{msg}}</div>'})const index = new Vue({el: "#index",data: {}}); </script> </body>
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。
<body> <div id="index"><input type="text" v-model="msg"><aji v-bind:msg="msg"></aji> </div><script>Vue.component('aji', {props: ['msg'],template: '<div>自定义组件aji,传参为:{{msg}}</div>'})const index = new Vue({el: "#index",data: {msg:''}}); </script> </body>
组件-自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
