本文共 5126 字，大约阅读时间需要 17 分钟。

1、Vue基础

1.1渐进式的前端框架。
Html引进vue：

 <!-- 生产环境版本，优化了尺寸和速度 -->    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2基本属性的应用
Html:

 <div id="vue-app">        <span>{  {greet('nihao')}}</span>        <h1>name:{  {name}}</h1>        <p>bob:{  {job}}</p>        <!-- 属性绑定 -->        <a v-bind:href="website"></a>        <input type="text" v-bind:value="job">        <!-- 此时的v-bind后面是： -->        <span v-html="websitetag"></span>        <!-- 此时的v-html后面是= -->        <!-- 属性绑定的时候写在标签里面的 -->    </div>

Js:

// 实例化vue对象new Vue({       el: "#vue-app",    data: {           name: "mi si te wu",        job: "java开发",        website: "www.baidu.com",        websitetag: "<a href='www.baidu.com'>百度</a>"    },    methods: {           greet: function(msg) {               return 'good morining!' + msg + this.name;        }    }});/** * el:element:需要获取的元素，一定是html中的根容器元素 * data:用于对数据的存储, * {   {}}：插值表达式，只能写在作用域中。 * methods:用于存储各种方法。 * v-bind/v-html:属性绑定 */

1.3键盘事件及键值修饰符
Html:

<div id="vue-app">        <h1>events</h1>        <!-- .once表示只能点击一次 -->        <button v-on:click.once="add">长一岁</button>        <!-- db表示双击 -->        <button v-on:dblclick="subtract">减一岁</button>        <p>my age is {  {age}}</p>        <div id="canvas" v-on:mousemove="updateXY">            {  {x}},{  {y}}-            <!-- 阻止事件冒泡 -->            <span @mousemove="stopMove">stopMove</span>            <a v-on:mousemove.stop="canvas">vue阻止事件冒泡</a>        </div>        <!-- 阻止默认事件发生 -->        <a @click.prevent="alert()" href="www.baidu.com">baidu娘娘</a>    </div>    <script src="app.js"></script>

Js:

 methods: {           add: function() {               this.age++;        },        subtract: function() {               this.age--;        },        updateXY: function(event) {               // console.log(event);            this.x = event.offsetX;            this.y = event.offsetY;        },        // js阻止事件冒泡        stopMove: function(event) {               event.stopPropagation();        },        alert: function() {               alert("nihao");        }

1.4数据双向绑定
Html:

  <div id="vue-app">        <h1>双向数据绑定/input/select/textarea</h1>        <label>姓名：</label>        <!-- 需要通过方法实现 -->        <!-- <input ref="name" type="text" v-on:keyup.enter="logname"> -->        <input type="text" v-model="name">        <!-- 通过v-model进行双向数据绑定，只需要添加v-model -->        <p>{  {name}}</p>        <label>年龄：</label>        <!-- <input ref="age" type="text" v-on:keyup.enter="logage" /> -->        <input type="text" v-model="age" />        <p>{  {age}}</p>    </div>    <script src="app.js">    </script>

Js:

new Vue({       el: "#vue-app",    data: {           name: "",        age: ""    },    methods: {           logname: function() {               // console.log("正在输入名字");            // this.name = this.$refs.name.value; //获取input里面的内容            // console.log(this.$refs.name.value); //打印在控制台        },        logage: function() {               // this.age = this.$refs.age.value;        }    }});

1.5计算属性
Html:

<div id="vue-app">        <h1>computed计算属性</h1>        <button v-on:click="a++">Add to A</button>        <button v-on:click="b++">Add to B</button>        <p>A-{  {a}}</p>        <p>B-{  {b}}</p>        <!-- 注意此时的 计算属性方法在调用的时候是不需要写括号的-->        <p>Age+A={  {addToA}}</p>        <p>Age+B={  {addToB}}</p>    </div>

Js:

 computed: {           addToA: function() {               console.log("As to A");            return this.a + this.age;        },        addToB: function() {               console.log("As to B");            return this.b + this.age;        }    }

1.6 css样式的动态绑定

Html:

 <div id="vue-app">        <h1>动态CSS class</h1>        <h2 v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">            <span>示例</span>        </h2>        <h2>示例2</h2>        <button v-on:click="changeColor=!changeColor">changeColor</button>        <button v-on:click="changeLength=!changeLength">changeLength</button>        <div v-bind:class="compClass">            <span>哇咔咔</span>        </div>    </div>    <script src="app.js">    </script>

Js:

new Vue({       el: "#vue-app",    data: {           changeColor: false,        changeLength: false    },    methods: {       },    computed: {           compClass: function() {               return {                   changeColor: this.changeColor,                changeLength: this.changeLength            }        }    }});

css:

span {       background-color: red;    display: inline-block;    padding: 10px;    color: #fff;    margin: 10px 0;}.changeColor span {       background-color: green;}.changeLength span:after {       content: "length";    margin-left: 10px;}

备注：vue中event事件修饰符：

<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

备注：技巧列表
1、window10中可以直接在命令行中拖入文件显示文件路径。