VUE入门实例

引言

   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

   

 

1. 到官网下下vue.js

  vue官网
我们这里使用开发版，它包含了许多警告提示信息

 

新建一个文件夹把vue.js放进去，然后创建一个html文件命名为index.html

2. 第一个hello world

编辑index的内容

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8 
 9 
10 
{{msg}}
11 
19 
20 

稍后我们在解释里面的各个意思，先使用浏览器打开index.html可以看到页面显示 hello world。

3. 挂载点、实例与模板

1 
9    
{{msg}}
  //挂载点标签里边的内容叫做vue实例的模板,{{}}里边的属性与vue实例的data里的属性绑定

4：vue提供了template模板标签

 1  
 2     
 3     
 4         
 5         
 6         
 7         
 8     
 9     
10     

11     
20     
21     
22     注意template由于vue的校验限制不能直接写{{msg}}，必须写到标签里，所以我们加一个h1标签。
23     刷新页面，同样显示hello world。

5. v-text与v-html

   

 1 v-text与v-html可以指定标签内的内容，两者的区别就是v-html会解析html标签。
 2    
 3    
 4     

 5     
13     
14     
15     刷新页面依然可以显示 hello world
16     data: {
17                 msg: "
hello world
"
18         }
19     再次刷新页面依然可以显示 
hello world
20     将标签改为v-html，刷新页面可以正常显示大号的：hello world，这是因为v-text不能解析html标签

6：点击事件@click

 1 vue的点击事件：@click （也可以使用v-on:click），我们当然是使用简写啦
 2   

 3     

7. 属性绑定和数据双向绑定

  

 1 v-bind:value="value"也可以使用简写 :value=“value” ，我们平时就使用简写。 单向绑定
 2    input标签代码改为  双向绑定
 3    单向绑定
 4    

 5        
{{msg}}
 6         //文本框值就为zhaoshuiqing了
 7    
 8     
18    其中v-bind:value="value"也可以使用简写 :value=“value” ，我们平时就使用简写。
19    双向绑定
20    

21        
{{msg}}
22         //文本框值就为zhaoshuiqing了
23    

8. 计算器属性和监听器也叫侦听器 computed和watch

 1 
 2    
 3     

 4        姓:
 5        名:
 6        
{{fuallName}}
 7         
{{count}}
 8     
 9     
32     
33     

9. v-if、v-show、v-for

  

 1 v-if 控制标签及其内容的显示和不显示
 2    v-show 控制标签及其内容的显示和隐藏
 3    区别：if是通过添加dom和删除dom实现显隐，show是通过给标签添加隐藏属性显隐。if会删除标签show不会
 4    v-for：用来循环遍历 (index索引从0开始)
 5    

 6     
if="flag">{{msg}}
 7     
 8     
17    hello world将不显示，true的情况下才会显示。此功能可以结合@click事件控制目标的显示和隐藏
18    循环
19    
20    
21     

22        
{{msg}}
23        

24          
for="(item,index) in list" :key="index">
25           {{item}}---索引：{{index}}
26          
27        
28     
29     
38     
39     
40     item相当于数据项内容，index是遍历的下标。
41     显示结果:
42     hello world
43      . 1---索引0
44      . 2---索引1
45      . 3---索引2

10：组件，全局组件与局部组件，父组件向子组件传值

1 局部组件定义在vue对象里面，全局组件使用Vue.component定义，组件其实也是一个vue实例

暂时先就总结整理这么多，后续继续学习！