【VueJs入门】

版权声明

首先申明：此篇博客不是本人原创，只是最近开始学习vue.jS,看到有作者写的很不错，我仅在它的基础上仅仅是修改了样式
原文博客地址：https://blog.****.net/column/details/12809.html
非常感谢原文作者提供这么宝贵的文章。

一、上手步骤

vue.js和jquery一样，只要引入vue.js就可以了。

1、创建一个Vue实例：先引入Vue.js文件，然后new一个Vue的实例即可。如下面的代码，通过<script src="./vue.js"></script>引入，然后在<script>标签中创建实例

2、挂载在Vue的实例里，通过传递的el属性

3、单向/双向绑定 data属性里的变量 = html标签里的{{}} = input标签里的v-model

<!DOCTYPE html>
<html lang="en">
    <script src="./vue.js"></script>
<body>
<div id="app">
    <input v-model="test"/>
    {{test}}
</div>
<script>
    new Vue({   //创建一个Vue的实例  
        el: "#app", //挂载点是id="app"的地方
        data: {     //数据
            test: "abc"     //变量test
        }
    })
</script>
</body>
</html>

二、案例(DEMO控制)

案例说明：
1. 单个dom的添加/删除/显示/隐藏——变量控
2. 多个在显示上互斥的dom（如登录时的提示）—— 用１个变量去控制
3. 多个同类型dom（用v-for来动态生成）

示例页面

代码：

 1 <html lang="en">
 2     <script src="./vue.js"></script>
 3 <body>
 4 <div id="app">
 5     <p>
 6         点击按钮切换显示的图标
 7     </p>
 8     <input type="button" v-on:click="set1" v-if="data1" value="【一个图标】"/>
 9     <input type="button" v-on:click="set1" v-if="!data1" value="另外一个图标"/>
10     <p>————————————————————————————</p>
11     <p>点击不同按钮决定显示什么</p>
12     <input type="button" @click="set2('baidu')" value="百度">
13     <input type="button" @click="set2('qq')" value="腾讯">
14     <input type="button" @click="set2('taobao')" value="淘宝">
15     <button @click="set2">什么都不显示</button>
16     <p>
17         <a href="http://www.baidu.com" target="_blank" v-if="data2=='baidu'">百度</a>
18         <a href="http://www.qq.com" target="_blank" v-if="data2=='qq'">腾讯</a>
19         <a href="http://www.taobao.com" target="_blank" v-if="data2=='taobao'">淘宝</a>
20     </p>
21     <p>————————————————————————————</p>
22     <p>
23         同类型dom，典型的是表格，类似的有li。<br>
24         <button @click="set3">点击添加内容</button>
25     </p>
26     <ul>
27         <li v-for="i in data3">{{i}}</li>
28     </ul>
29 </div>
30 <script>
31     new Vue({   //创建一个Vue的实例
32         el: "#app", //挂载点是id="app"的地方
33         data: {
34             data1: true,
35             data2: "",
36             data3: [1]
37         },
38         methods: {
39             set1: function () {
40                 this.data1 = !this.data1;
41             },
42             set2: function (arg) {
43                 this.data2 = arg;
44             },
45             set3: function (arg) {
46                 this.data3.push(this.data3.length + 1);
47             }
48         }
49     })
50 </script>
51 </body>

三、案例（input相关）

微博的注册页面如下图

VueJs(1)---快速上手VueJs

案例页面

代码：

注册页面代码

四、案例(表格相关)

1.表格的核心特点是：类型重复的大量内容。
2.Vue非常擅长对表格的处理，只需要已知数据，预先设置好格式，即可自动生成数据。
3.常见表格需求是选择性显示（比如只显示符合条件的项），这点Vue也十分擅长，你只需要设置好条件，Vue在渲染的时候会自动帮你完成

案例页面

table相关

五、其它Vue常见功能

1、过滤器功能：

1. 主要用于文本转换；
2. 例如获得一个日期对象后，通过过滤器命令自动转为我们要求的日期格式。
3. {{ message | capitalize }}  message变量被过滤器函数capitalize所处理

2、计算属性：

1. 更加高级的功能，可以视为过滤器功能的进阶版，适用的方向更多（不仅仅是文本）
2. 获取一个变量（输入内容）→通过计算函数转换→显示转换结果（输出内容）
3. 当输入内容变更时，输出内容也会自动随之变更
4. 利用ES5的getter和setter特性来实现，有缓存特点

3、$watch方法：

1. 监控变量，当变量改变时触发回调函数；
2. 例如之前的微博注册demo中，通过检测表示省份的变量的变化，来动态设置表示市的dom

4、class/style绑定：

1. 通过改变变量，来设置dom的样式的类，或者直接设置样式的属性
2. <div v-bind:class="{ active: isActive }"></div>
3. isActive值为true时，dom获得active这个类

5、事件监听：

1. 通过$emit触发事件和$on响应事件，只在当前Vue实例内有效，因此不会带来干扰；
2. 用起来非常舒服，适用于一对多和多对一的场景；
3. 跨组件响应（父子组件通信）时，可以使用global event bus来实现，或者使用插件实现

6、路由功能：

1. 简单来说，按需加载，而不是一次性全部加载；
2. 有官方推荐支持使用的的vue-router库；

通过本篇文章先全局了解下vue.js后期会继续学习。

中尉【6】