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: 可以缩写为@。

 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

VUE-02 基本指令

推荐阅读