VUE学习笔记01

一：认识

这是一个渐进式的js框架，所谓渐进式就是只我们不用讲vue内容整体全部把控，学习一点就可以用一点。

这是一个非常简单且很优秀的js框架，它采用的是mvvm双向绑定模式。

mvvm模式就是指modelAndView viewAndModel,当view一旦发生改变。viewModel就可以监听到，model就可以进行更改，然后又会被监听到，view也进行响应的改变，实现双向绑定。

 

二：入门

首先在官网下载vue.js

1.引入

1 <!--引入vue  用相对路径-->
2 <script src="vue/vue.js"></script>

2.准备挂载的标签

1 <div id="app"></div>

3.创建vue对象

 el:元素的挂载(id,class,标签：建议使用id),只有挂载的元素才能使用表达式这些

data:数据(vue对象的所有数据都写在这里)

methods:vue对象的方法(可以有多个)

this指的就是这个vue对象,js与表达式中都可以调用这个方法

 1     <!--创建vue对象-->
 2     <script>
 3         var app=new Vue({
 4             el:"#app" , //挂载  可以使id  class  标签
 5             data:{       //数据   可以是变量  对象   数组
 6                 message:"愚人节快乐",
 7                 student:{      //可以用对象
 8                     name:"苏苏",
 9                     age:18
10                 },
11                 arr:["你","好"]  //可以用数组
12             },
13             methods:{   //方法 记着这里有s
14                 say(msg){
15                     return this.student.name+msg
16                 }
17             }
18         });
19     </script>

4.在挂载的标签中取值

表达式   {{vue对象中的属性}}

1     <div id="app">
2         {{message}}====
3         {{student.name}}====
4         {{arr[0]}}{{arr[1]}}====
5         {{say("愚人节快乐")}}
6     </div>

结果输出

愚人节快乐==== 苏苏==== 你好==== 苏苏愚人节快乐

三、表达式

1.表达式   {{vue对象中的属性}}

2.加减乘除（当操作的字符串时，加编程字符串的拼接，减乘除不变）、三目运算、对象操作、数组操作、还可以调用方法

 1     <div id="app">
 2         {{employee.name}}===
 3         {{num1+num2}}===
 4         {{num1+num3}}===   <!--字符串拼接-->
 5         {{sex?"男":"女"}}===
 6         {{arr[0]}}
 7     </div>
 8     <script>
 9         // 对象操作准备
10         employee={
11             name:"春天",
12             age:18
13         }
14         // 数组操作准备
15         arr=["张","三"]
16         //创建vue对象
17         new Vue({
18             el:"#app",//挂载
19             data:{
20                 employee:employee,
21                 num1:8,
22                 num2:5,
23                 num3:"6",
24                 sex:true,
25                 arr:arr
26             }
27         })
28     </script>

3.结果

春天=== 13=== 86=== 男=== 张

四：指令

vue指定的一些特殊的属性 : v-属性名
1.v-text:直接展示,不会解析标签

2.v-html:直接展示(解析html标签)
3.v-for:循环(数组,对象,数字,字符串)
　　v:值 i:下标 k:属性名
　　v-for="(v,i) in 数组"
　　v-for="(v,k,i) in 对象"
4.v-show:有内容，只是隐藏(display="none")
5.v-if:不满足条件的直接就没有了
　　v-else-if=""
　　v-else

 

 1 <div id="app1" v-text="textArl"></div>
 2 <hr/>
 3 <div id="app2" v-html="htmlArl"></div>
 4 <hr/>
 5 <div id="app3" v-show="showArl">有没有</div>
 6 <hr/>
 7 <div id="app" >
 8     <div v-if="age<19">小于19</div><!--不满足就是真的没有div-->
 9     <div v-else-if="age>=19 && age<56">诶</div>
10     <div v-else>大于</div>
11 </div>
12 <script>
13     new Vue({
14         el:"#app",
15         data:{
16             textArl:"<h1>这是文本</h1>",//没有解析标签
17             htmlArl:"<h1>这是文本</h1>",//解析了标签
18             showArl:false,//不是真正的没有，只是隐藏了
19             age:19
20         }
21     })
22 </script>

 

6.v-bind:绑定属性(属性中使用vue的表达式)
　　标准写法: <img v-bind:src="src" />
　　简写形式(建议): <img :src="src" />
　　绑定对象属性: <img v-bind="img" />

 1 <div id="app">
 2     <!--标准格式-->
 3     <img v-bind:src="src" v-bind:alt="alt" >
 4     <!--简便格式-->
 5     <img :src="src" :alt="alt" >
 6     <!--操作对象-->
 7     <img v-bind="imgs"/>
 8 </div>
 9 <script>
10     new Vue({
11         el:"#app",
12         data: {
13             src: "img/s1.png",
14             alt: "没有啊",
15             imgs:{
16                 src:"img/s1.png",
17                 alt: "没有啊",
18             }
19         }
20     })
21 </script>

 

7.v-model:双向绑定(只能用到input,select,textarea中)

 1 <div id="app">
 2         <input type="radio" name="sex" v-model="sex" value="true"/>男
 3         <input type="radio" name="sex" v-model="sex" value="false"/>女
 4         {{sex}}
 5         <hr/>
 6         <input type="checkbox"  v-model="hobbys" value="1"/>篮球
 7         <input type="checkbox"  v-model="hobbys" value="2"/>足球
 8         <input type="checkbox"  v-model="hobbys" value="3"/>排球
 9         <input type="checkbox"  v-model="hobbys" value="4"/>棒球
10         {{hobbys}}
11         <hr/>
12         <textarea v-model="textArea"></textarea>
13         {{textArea}}
14         <hr/>
15         <select v-model="city">
16             <option value="1">ss</option>
17             <option value="2">ww</option>
18         </select>
19         {{city}}
20         <hr/>
21         <select >//v-for和v-bind结合
22             <option v-for="v in citys" :value="v.id">{{v.name}}</option>
23         </select>
24         <hr/>
25     </div>
26     <script>
27         new Vue({
28             el:"#app",
29             data:{
30                 sex:false,
31                 hobbys:[1,4],
32                 textArea:"愚人节快乐",
33                 city:"1",
34                 citys:[{id:1,name:"ww"},{id:2,name:"ss"},{id:3,name:"爱琴海"}],
35             }
36         })
37     </script>

 


8.v-on:事件绑定
　　<input type="button" v-on:click="say()" />
　　<input type="button" v-on:click="say" />
　　简写形式:
　　<input type="button" @click="say" />

 1 <div id="app">
 2     <!--<input type="button" value="点我" v-on:click="say">-->
 3     <!--<input type="button" value="点我" v-on:click="say()">-->
 4     <input type="button" value="点我" @click="say">
 5 </div>
 6 <script>
 7     new Vue({
 8         el:"#app",
 9         data:{},
10         methods: {
11             say() {
12                 alert(0)
13             }
14         }
15     })
16 </script>

 

五、组件（自定义标签）

格式  组件名+模块

1.全局组件

 

1     Vue.component("mytag",{
2         template:"<h1>自定义全局标签</h1>"
3     })
4 
5     new Vue({
6         el:"#app",
7     })

 

 

 

2.局部组件

 

 1 <div id="app">
 2     <mytag></mytag>
 3 </div>
 4 <script>
 5     new Vue({
 6         el:"#app",
 7         components:{
 8             mytag:{
 9                 template:"<h2>这是一个局部标签</h2>"
10             }
11         }
12     })
13 </script>

 

3.注意事项

1.先定义组件，再挂载
2.组件的模板必需要一个根标签
3.命名如果是驼峰(建议小写) myTag -> <my-tag>

 

posted @ 2019-04-02 00:02  .guangbin  阅读(181)  评论(1)  编辑  收藏  举报