vue.js学习笔记

什么是MVVM模式？

MVVM和MVC最大区别在于，MVVM可以实现双向绑定。因此，刚开始接触Vue.js时，就迫不及待的想要尝试双向绑定到底是什么样的？

双向绑定的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
    <div>{{ message}}</div>
    <input type="text" v-model="message">
</div>
<script src="vue.js"></script>
<script>
    var exampleData = {
        message: 'Hello Vue.js!'
    };
    new Vue({
        el: '#app',
        data: exampleData
    })

</script>

实现效果如下：

正方向（这里没有正反之分，只是为了方便理解）的绑定为：将message绑定到文本框，当文本框的值改变时，

的值也会跟着改变。

反方向的绑定为：当

的值改变时，文本框的值也会随之改变。

在chrome的控制台中可以改变<div></div>的值，结果如图所示。

体验完之后，才明白双向绑定的含义。但即使这样，此时的我还是不能够理解Vue.js有什么强大的地方。于是，怀着敬畏之心，继续学习。

Vue.js常用指令

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

v-bind

v-bind 主要用于属性绑定，其中绑定类和绑定样式比较常用。

由于v-bind非常常用，Vue官方提供了一个简写方式，如下所示：

1
2
3
4
5
<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

格式：

绑定类：v-bind:class

绑定样式：v-bind:style

出现一个错误：v-bind显示‘Namespace ‘v-bind’is not bound’

百度后解决问题，发现这是webstorm的问题，webstorm不认识v-bind。

解决方法是：

​ File->Settings -> Editor -> Inspections,找到XML，把 Unbound XML namespace prefix的勾去掉。

如图所示：

注意：绑定类和绑定样式分别有两种语法：对象语法和数组语法。

1.绑定类

对象语法：传给 v-bind:class 一个对象，以动态地切换 class。并且类current是否存在，将取决于isCurrent的布尔值是否为真。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
    <div v-bind:class="{current: isCurrent}">绑定类</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isCurrent: true
        }
    })
</script>

渲染效果如图：

数组语法：把一个数组传给v-bind:class，以应用一个class列表。即类名为data对象中一个键值对的值，其键名可以随意取名，然后以数组的形式绑定在v-bind:class中。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
    <div v-bind:class="[currentClass]">绑定类</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentClass: 'current'  //类名
        }
    })
</script>

显示效果如图所示：

2.绑定样式

对象语法: 使用缩写时，非常像CSS。

1
<div :style="{color:currentColor,fontSize:fontSize+'px'}">绑定样式</div>

注意：

​ 1.CSS属性名必须用驼峰命名法，否则会报错。

​ 2.在html中有单位的必须加上，否则不起作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <div v-bind:style="{color:currentColor,fontSize:fontSize+'px'}">绑定样式</div>   
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentColor: 'blue',  //必须使用驼峰命名法，否则会报错
            fontSize: 40
        }
    })
</script>

渲染效果如图所示：

也可以绑定一个整体对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
    <div v-bind:style="currentStyle">绑定样式</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentStyle: {
                color: "red",
                fontSize: "40px"
            }
        }
    })
</script>

数组语法：可将多个样式对象应用到一个元素上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <div v-bind:style="[currentStyleA,currentStyleB]">绑定样式</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentStyleA: {
                color: "red",
                fontSize: "40px"
            },
            currentStyleB:{
              backgroundColor: 'gray',
              textDecoration:'underline'
            }
        }
    })
</script>

渲染效果如图所示：

v-on

1.事件绑定

（1）直接在HTML中输入js代码

（2）在HTML中输入方法

（1）直接在HTML中输入js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <div v-on:click="couter+=1">按钮</div>
    <p>这个按钮被点击了{{ couter }}次</p>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data: {
            couter: 0
        }
    })
</script>

运行效果如图所示：

（2）在HTML中输入方法

可以获取data中的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <div v-on:click="greet">按钮</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"world!"
        },
        methods: {
            greet:function () {
                alert("hello "+this.name);
            }
        }
    })
</script>

也可以传参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <div v-on:click="greet('friend')">按钮</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        methods: {
            greet:function (arg) {
                alert("hello "+arg);
            }
        }
    })
</script>

2.事件修饰符

Vue.js 为 v-on 提供了 事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

3.缩写形式

1
2
3
4
5
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

v-if v-else v-else-if

条件渲染： 根据条件展示元素（动态的向DOM树内添加或者删除DOM元素）。

注意：

​ 1.v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别；

​ 2.v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

语法：

1
2
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-show

用于根据条件展示元素（元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <h1 v-show="yes">Yes!</h1>
    <h1 v-show="no">No!</h1>
    <div v-show="age>= 20">show</div>
    <div v-show="age< 20">none</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            yes: true,
            no: false,
            age: 25
        }
    })
</script>

显示效果如图所示：

v-for

用于遍历一个数组。

注意：

​ 1.(index, item) in items 形式的特殊语法，items 是源数据数组， item 是数组元素迭代的别名可以随意更改，index可获取当前项的索引（在vue官网中，index 和 item 顺序写反了）。

​ 2.由于遍历的是一个数组，所以items的格式是数组格式。

​ 3.绑定在li标签中（即绑定在要遍历的元素上）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <ul>
        <li  v-for="(index, item) in items">
           {{index}}:{{item.name}}
        </li>
    </ul>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            items:[
                {
                    name: "Tom"
                },
                {
                    name: "Alan"
                }
            ]
        }
    })
</script>

渲染效果如图显示：

用于遍历一个对象的属性。

注意：

​ 1.(key, item) in items 形式的特殊语法，items 是源数据数组， item 是数组元素迭代的别名可以随意更改，key是键值对中的键名（在vue官网中，key 和 item 顺序写反了）。

​ 2.由于遍历的是一个对象，所以items的格式是对象格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    <div v-for="(key,item) in items">{{key}}:{{item}}</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            items: {
                name: "Lucy",
                age: 12,
                gender: "女"
            }
        }
    })
</script>

渲染效果如图所示：

表单数据绑定

文本

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <input type="text" v-model="message">
    <div>{{message}}</div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
    })
</script>

多行文本

注意： 为了div中的文字可以和文本域中的换行一致，需要给div加一个样式white-space: pre-line;,它的作用是合并空白符序列，但是保留换行符。

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <textarea v-model="message"></textarea>
    <div style="white-space: pre-line;">{{message}}</div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app"
    })
</script>

复选框

1.单个复选框

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <input type="checkbox" id="chechbox" v-model="checked">
    <label for="chechbox">{{checked}}</label>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
    })
</script>

2.多个复选框

注意：

​ 1.label标签的作用是点击label标签内复选框自动选中。

​ 2.必须设置value值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <input type="checkbox" id="Tom" value="Tom" v-model="arraycheck">
    <label for="Tom">Tom</label>
    <input type="checkbox" id="Lucy" value="Lucy" v-model="arraycheck">
    <label for="Lucy">Lucy</label>
    <input type="checkbox" id="Alan" value="Alan" v-model="arraycheck">
    <label for="Alan">Alan</label>
    <div>{{arraycheck}}</div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            arraycheck: [ ]
        }
    })
</script>

单选按钮

注意：

​ 1.label标签的作用是点击label标签内复选框自动选中。

​ 2.必须设置value值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <input type="radio" id="one" value="男" v-model="radioResult">
    <label for="one">男</label>
    
    <input type="radio" id="two" value="女" v-model="radioResult">
    <label for="two">女</label>
    <div>{{radioResult}}</div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app"
    })
</script>

下拉框

注意：如果 v-model 表达初始的值不匹配任何的选项，<select> 元素就会以”未选中”的状态渲染。在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。因此，像以上提供 disabled 选项是建议的做法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data: {
            selected: ''
        }
    })
</script>

组件

vue组件书写方式

一、使用script标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
	<my-component></my-component>
</div>
<script type="text/template" id="myComponent">
	<div>This is a component!</div>
</script>
<script src="js/vue.js"></script>
<script>
   Vue.component('my-component',{
      template: '#myComponent'
    })
   new Vue({
      el: '#app'
   })
 </script>

二、使用template标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
	<my-component></my-component>
</div>
<template id="myComponent">
	<div>This is a component!</div>
</template>
<script src="js/vue.js"></script>
<script>
   Vue.component('my-component',{
      template: '#myComponent'
    })
   new Vue({
      el: '#app'
   })
 </script>

全局组件

全局组件能在多个vue作用域里面使用,但是必须在vue作用域里面。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
    <my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
    Vue.component("my-component",{
        template:"<div>this is my component</div>"
    })
   new Vue({
        el: "#app"
    })
</script>

全局组件,实例component中的props 和初始化中data之间是如何传值的？代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
    <my-component :my-name="name" :my-age="age"></my-component>
</div>
<template id="basicTemplate">
    <tr>
        <th colspan="2">表格</th>
    </tr>
    <tr>
        <td>name</td>
        <td>{{myName}}</td>
    </tr>
    <tr>
        <td>age</td>
        <td>{{myAge}}</td>
    </tr>

</template>
<script src="vue.js"></script>
<script>
    Vue.component("my-component",{
        template:"#basicTemplate",
        props:["myName","myAge"]
    })
    new Vue({
        el:"#app",
        data:{
            name: "Alan",
            age: 12
        }
    })
</script>

1.<my-component :my-name="name" :my-age="age"></my-component>中的my-name 和my-age 与Vue.component中的props相对应，但是命名方式需要注意：

​ 如何Vue.component中的props中的值命名是驼峰式的，那么在html的my-component中，由于html的特性是不区分大小写（比如LI和li是一样的），因此，html标签中要传递的值要写成短横线式的（如my-name、my-age），以区分大小写。

2.<my-component :my-name="name" :my-age="age"></my-component>中my-name和my-age的值name和age是初始化中data中的属性。

所以，以上代码运行结果为：

局部组件

注意：和全局的组件不同的是，局部组件注册时，component是加s的。因为不一定只有一个局部组件，可能有很多，还有这里的组件只能在它制定的作用域里面使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <part-component></part-component>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        components:{
            "part-component":{
                template:"<div>this is a part-component</div>"
            }
        }
    })
</script>

通过一个例子明确了解全局组件和局部组件的使用范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="app">
    <my-component1></my-component1>
</div>
<hr>
<div id="app2">
    <my-component1></my-component1>
    <my-component2></my-component2>
    <my-component3></my-component3>
</div>
<script src="vue.js"></script>
<script>
  
  //    全局组件：可以使用在所有作用域中（即可以在app中使用，也可以在app2中使用）
    Vue.component("my-component1",{       
        template:"<div>this is the first component</div>"
    });

    var vue1 =   new Vue({
        el:"#app"
    })
    
    var vue2 = new Vue({
        el:"#app2",
      //局部组件：只能在app2中使用
        components:{
            "my-component2":{
                template:"<div>this is the second component</div>"
            },
            "my-component3":{
                template:"<div>this is the third component</div>"
            }

        }
    })
</script>

父子组件

什么是父子组件？

如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
        el:"#app",
        data:{
            name: "Lily",
            age: 18
        },
        components:{
            "my-component":{
                template:"#myComponent",
                props:["myName","myAge"]
            }
        }
    })

html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="app">
	<table>
		<tr>
			<th colspan="3">父组件数据</td>
		</tr>
		<tr>
			<td>name</td>
			<td>{{ name }}</td>
			<td><input type="text" v-model="name" /></td>
		</tr>
		<tr>
			<td>age</td>
			<td>{{ age }}</td>
			<td><input type="text" v-model="age" /></td>
		</tr>
	</table>
	<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
	<table>
		<tr>
			<th colspan="3">子组件数据</td>
		</tr>
		<tr>
			<td>my name</td>
			<td>{{ myName }}</td>
			<td><input type="text" v-model="myName" /></td>
		</tr>
		<tr>
			<td>my age</td>
			<td>{{ myAge }}</td>
			<td><input type="text" v-model="myAge" /></td>
		</tr>
	</table>
</template>

父子组件之间的数据存在三种影响关系：

1.相互影响；

2.父组件影响子组件，子组件不影响父组件；

3.互不影响。

当组件不使用任何修饰符时，以上代码为第二种情况；

​ <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>

当组件使用.sync修饰符时，为第一种情况；

​ <my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

当组件使用.once修饰符时，为第三种情况；

​ <my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

方法

如何处理对应索引的问题?

1
2
3
4
5
6
7
8
9
<button @click="deletePeople($index)">delete</button>
new Vue({
        el:"#app",
        methods:{
            deletePeople:function (index) {
                this.items.splice(index,1);
            }
        }
    })

如上代码所示，在HTML中方法内的$index 和methods中function内的index相对应。

过滤器

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>