VUE-02 基本指令
公司要用VUE开发前端页面，简单学点命令。
指令：dom元素的行间属性，vue提供了内置的指令，必须v-开头，后面的值均为变量
1、{{msg}} —— 文本插值
1 <div id="app"> 2 <p>{{ message }}</p> 3 </div> 4 5 <script> 6 new Vue({ 7 el: '#app', 8 data: { message: 'Hello World ！' } 9 }) 10 </script>
2、v-html —— 绑定HTML代码
1 <div id="app"> 2 <div v-html="message"></div> 3 </div> 4 5 <script> 6 new Vue({ 7 el: '#app', 8 data: { message: '<h1>Hello World ！</h1>' } 9 }) 10 </script>
3、v-model —— 表单绑定
指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-model（表单元素）忽略掉了value，checked，selected，将数据绑定到视图上，视图修改后会影响数据。
绑定的是value属性值。
1 <div id="app"> 2 <p>{{ message }}</p> 3 <input v-model="message"> 4 </div> 5 6 <script> 7 new Vue({ 8 el: '#app', 9 data: { 10 message: 'Hello!' 11 } 12 }) 13 </script>
4、v-on —— 事件绑定
用于监听 DOM 事件，v-on: 可以缩写为@。
<a @click="doSomething"></a>
1 <div id="app"> 2 <p>{{ message }}</p> 3 <button v-on:click="reverseMessage">反转字符串</button> 4 </div> 5 6 <script> 7 new Vue({ 8 el: '#app', 9 data: { 10 message: 'HELLO!' 11 }, 12 methods: { 13 reverseMessage: function () { 14 this.message = this.message.split('').reverse().join('') 15 } 16 } 17 }) 18 </script>
5、v-bind —— 绑定属性和属性值
v-bind 指令被用来响应地更新 HTML 属性
1 <div id="app"> 2 <pre><a v-bind:href="url">本页面</a></pre> 3 </div> 4 5 <script> 6 new Vue({ 7 el: '#app', 8 data: { 9 url: 'https://www.cnblogs.com/onroad2019/p/11475665.html' 10 } 11 }) 12 </script>
6、v-if —— 条件 （添加 / 移除 此标签）
1 <div id="app"> 2 <p v-if="seen">你看不到我</p> 3 <template v-if="ok"> 4 <h1>看看看</h1> 5 <p>我出现了！</p> 6 <p>哈哈哈！</p> 7 </template> 8 </div> 9 10 <script> 11 new Vue({ 12 el: '#app', 13 data: { 14 seen: false, 15 ok: true 16 } 17 }) 18 </script>
7、v-else —— 条件
1 <div id="app"> 2 <div v-if="Math.random() > 0.5"> 3 大于0.5 4 </div> 5 <div v-else> 6 小于0.5 7 </div> 8 </div> 9 10 <script> 11 new Vue({ 12 el: '#app' 13 }) 14 </script>
8、v-else-if —— 条件
1 <div id="app"> 2 <div v-if="code >= 90"> 3 优秀 4 </div> 5 <div v-else-if="code >= 85"> 6 良好 7 </div> 8 <div v-else-if="code >= 60 "> 9 及格 10 </div> 11 <div v-else> 12 不及格 13 </div> 14 </div> 15 16 <script> 17 new Vue({ 18 el: '#app', 19 data: { 20 code: 88 21 } 22 }) 23 </script>
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
9、v-show —— 展示
v-show 指令来根据条件展示元素
1 <div id="app"> 2 <h1 v-show="ok">Hello!</h1> 3 </div> 4 5 <script> 6 new Vue({ 7 el: '#app', 8 data: { 9 ok: true 10 } 11 }) 12 </script>
与v-if的区别
v-show：这个页面框架存在，false时，style=display：none
v-if：为false时，这个html将会被移除。
10、v-for —— 循环语句
1)、数组循环
1 <div id="app"> 2 <ol> 3 <li v-for="aa in names"> 4 {{ aa.name }} 5 </li> 6 </ol> 7 </div> 8 9 <script> 10 new Vue({ 11 el: '#app', 12 data: { 13 names: [ 14 { name: '小燕子' }, 15 { name: '紫薇' }, 16 { name: '晴格格' } 17 ] 18 } 19 }) 20 </script>
结果：
2)、循环对象值
1 <div id="app"> 2 <ol> 3 <li v-for="aa in introduction"> 4 {{ aa}} 5 </li> 6 </ol> 7 </div> 8 9 <script> 10 new Vue({ 11 el: '#app', 12 data: { 13 introduction: 14 { name: '小燕子',position: '格格' ,age:60 } 15 } 16 }) 17 </script>
结果：
3)、多个参数
1 <div id="app"> 2 <ul> 3 <li v-for="(value, key, index) in object"> 4 {{ index }}. {{ key }} : {{ value }} 5 </li> 6 </ul> 7 </div> 8 9 <script> 10 new Vue({ 11 el: '#app', 12 data: { 13 object: { 14 name: '小燕子', 15 position: '格格', 16 age: 60 17 } 18 } 19 }) 20 </script>
结果：
11、过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示。
1 <div id="app"> 2 {{ message | capitalize| pinjie('Hello') }} 3 </div> 4 5 <script> 6 new Vue({ 7 el: '#app', 8 data: { 9 message: 'andy' 10 }, 11 filters: { 12 capitalize: function (value) { 13 if (!value) return '' 14 value = value.toString() 15 return value.charAt(0).toUpperCase() + value.slice(1) 16 }, 17 pinjie: function (v,arg1){ 18 return arg1+' '+v; 19 } 20 21 } 22 }) 23 </script>
结果： Hello Andy
