Vue基础指令

一 Vue框架简介　

　　Vue是一个构建数据驱动的web界面的渐进式框架。

　　目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件

1  <div id="app">
2         <span>你的名字是{{name}}</span>
3     </div>
4     var app=new Vue({
5         el: '#app',
6         data:{
7         name:'wdb'
8     }
9     })

二 Vue指令　　

　　Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，

　　它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。

　　1.v-text v-html

 1 <body>
 2     <div id="app">
 3         <p v-text="name"></p>
 4         <div v-html="hobby"></div>
 5     </div>
 6     const app=new Vue({
 7         el: '#app',
 8         data:{
 9         name:'wdb',
10         hobby:`
11         <ul>
12             <li>抽烟</li>
13             <li>喝酒</li>
14             <li>烫头</li>
15         </ul>
16         `
17         }
18     })
19 </body>

　　2.v-for

 1 <div id="app">
 2         <h3>{{name}}</h3>
 3         <p>他喜欢的运动是:</p>
 4         <ul>
 5             <li v-for="(index,sport) in sports" :key="index">{{index}}{{sport}}</li>
 6         </ul>
 7         <ul>
 8             <li v-for="item in array">姓名:{{item.name}}  年龄:{{item.age}} 职业:{{item.job}}</li>
 9         </ul>
10     </div>
11     <script>
12         const app=new Vue({
13             el:'#app',
14             data:{
15                 name:'王东波',
16                 sports:['football','basketball','volleyball'],
17                 array:[{
18                     name:'wdb',
19                     age:22,
20                 job:'engineer'
21                 }]
22             }
23         })
24     </script>

　　3.v-if

 1 <div id="app">
 2     <div v-if="level=='high'">
 3         <h2>this is high level!</h2>
 4     </div>
 5     <div v-else-if="level=='normal'">
 6         <h2>this is normal level!</h2>
 7     </div>
 8     <div v-else>
 9         <h2>sorry!</h2>
10     </div>
11 </div>
12     <script>
13         const app=new Vue({
14             el:'#app',
15             data:{
16                 level:'normal',
17             }
18         })
19     </script>

　　4.v-show 操作的是display属性

 1 div>
 2     <div v-show="app">
 3         <h2>王东波</h2>
 4     </div>
 5 </div>
 6 <script>
 7      const app=new Vue({
 8             el:'#app',
 9             data:{
10                 is_show:true,
11             }
12         })
13 </script>

　　5.v-on v-bind v-bind : v-on @

 1 <div id="app">
 2     <p class="alex_color" :class="{bg:is_green}">alex</p>
 3     <button @click="my_click(123)">点击变绿</button>
 4 </div>
 5     <script>
 6         const app=new Vue({
 7             el:'#app',
 8             data:{
 9                 is_green:false,
10             },
11             methods:{
12                 my_click:function (data) {
13                     this.is_green=!this.is_green;
14                 },
15             }
16         })
17     </script>

　　6.v-model

 1 <div id="app">
 2     <input type="text" v-model="input">  {{input}}
 3     <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea> {{article}}
 4     <select name="" v-model="lady" multiple>
 5         <option value="first">小苍</option>
 6         <option value="second">小波</option>
 7         <option value="third">小麻</option>
 8     </select>
 9     {{lady}}
10 </div>
11     <script>
12         const app=new Vue({
13             el:'#app',
14             data:{
15                 input:'',
16                 article: '',
17                 lady:['first','third']
18             }
19         })
20     </script>

　　7.指令修饰符 -- .number -- .lazy -- .trim

 1 <div id='app'>
 2     用户名: <input type="text" v-model.lazy.trim="username"><br>
 3     {{username}}
 4     手机号: <input type="text" v-model.number="phone"><br>
 5     {{phone}}
 6 </div>
 7 <script>
 8 var app = new Vue({
 9     el: '#app',
10     data: {
11         username: "",
12         phone: "",
13     },
14 });
15 </script>

　　8.自定义的指令

　　9.计算属性