Vue.js教程学习笔记

叁歲伎倆 2022-11-14 13:18 128阅读 0赞

官方视频简易教程：https://learning.dcloud.io/

##### 1. 安装与部署 #####

第一阶段（初学）可以通过在html文件中引入脚本来完成安装

如果后期熟悉了CLI安装器，则生成的可以不是html后缀的文件，而以vue为后缀。

##### 2. 第一个Vue应用 #####

通过双括号可以进行变量双向绑定。Vue()函数是Vue.js的主要函数。

var vm = new Vue();

##### 3. 数据与方法 #####

对于

可以用ID选择器进行选择

var data = { 
    	a: 1,
    	b: 1
    };
    var vm = new Vue({ 
    	el: "#app",
    	data: data
    });

需要绑定的变量，必须先定义，然后才能生效。一下这两种写法的效果是一样的

vm.$data.b = "bbbBBB";
    data.a = "aaaAAA";

可以用 w a t c h 来 监 视 变 量 的 变 化 并 进 行 处 理 ， 但 是 一 定 只 对 定 义 watch来监视变量的变化并进行处理，但是一定只对定义 watch来监视变量的变化并进行处理，但是一定只对定义watch之后发生的变化生效。

vm.$watch('a', function(newVal, oldVal){ 
    	console.log(oldVal, ' change to ' ,newVal);
    });
    data.a = "AAaa";

上面的两句交换位置就不生效了。

##### 4. 生命周期 #####

主要生命周期如下

> beforeCreate  
> created  
> beforeMount  
> mounted  
> beforeUpdate  
> updated  
> activated  
> deactivated  
> beforeDestroy  
> destroyed  
> errorCaptured

##### 5. 模板语法-插值 #####

使用双花括号进行文本绑定；  
使用v-html进行HTML标签绑定；  
使用v-bind进行HTML标签属性绑定；

<div id="app">
    	<p>{
       { rawHtml }}</p>
    	<p v-html="rawHtml"></p>
    	<div v-bind:class="my_color_class">test...</div>
    </div>

var vm = new Vue({ 
    	el: '#app',
    	data: { 
    		rawHtml: '<span style="color:red">this should be red</span>',
    		my_color_class: 'my_red'
    	}
    });

插值内容也支持Javascript表达式

{ {  number + 1 }}
    { {  ok ? 'YES' : 'NO' }}
    { {  message.split('').reverse().join('') }}

##### 6. 模板语法-指令 #####

指令是以“v-”开头的vue标签属性，例如：  
v-if（条件渲染）  
v-bind（属性绑定）后用冒号带参数，如上面的例子

指令后还可以使用修饰符，例如在下面的代码中，click后面的stop修饰符用于阻止click事件向外层传递到click1：

<div @click="click1">
    	<div @click.stop="click2">
    		click here
    	</div>
    </div>

##### 7. class / style动态绑定 #####

如下面的代码所示：  
class1，class2，class3是3个不同的class，其中class2和class3通过isClass2，isClass3开关进行控制。通过v-bind:class可以将多个class绑定到同一个div上。  
:style（注意必须有冒号），可以将style动态绑定。注意动态绑定style的时候，要使用\{ \}，且使用逗号进行分隔。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<div class="class1" v-bind:class="[isClass2 ? 'class2' : '', isClass3 ? 'class3' : '']" style="width:300px; height:200px; text-align:center; line-height:200px;">
    				 test dynamic class
    			</div>
    			
    			<div :style="{ color:color1, fontSize:font1, background: isRed ? '#FF0000' : ''}">
    				test dynamic style
    			</div>
    		</div>
    		
    		<script type="text/javascript"> var vm = new Vue({ el: '#app', data: { isClass2 : true, isClass3 : true, color1 : "#FFFF00", font1 : "30px", isRed : true } }); </script>
    		<style type="text/css"> .class1{ font-size:30px;} .class2{ color:#00FF00} .class3{ background:#0000FF} </style>
    	</body>
    </html>

##### 8. 条件渲染 #####

主要有v-if（也包括了v-else-if，v-else）和v-show。  
前者是真的“条件渲染”，后者是渲染后控制“显示或隐藏”。  
相对而言，前者的切换成本高，后者的初始化成本高。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<p v-if="tag1 === 'A'">A</p>
    			<p v-else-if="tag1 === 'B'">B</p>
    			<p v-else-if="tag1 === 'C'">C</p>
    			<p v-else>Not ABC</p>
    			<p v-show="isShow">Hello</p>
    		</div>
    		
    		<script type="text/javascript"> var vm = new Vue({ el: '#app', data: { tag1 : 'A', isShow : true } }); </script>
    	</body>
    </html>

##### 9. 列表渲染 #####

使用v-for可以进行列表渲染，其中循环的目标可以是数组的不同元素，也可以是对象的不同属性。如下面的代码所示：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<ul>
    				<li v-for="item, index in items" :key="index">
    					{
       {index}} - {
       { item.msg }}
    				</li>
    			</ul>
    			<ul>
    				<li v-for="value, key in object" :key="key">
    					{
       {key}} : {
       { value }}
    				</li>
    			</ul>
    		</div>
    		
    		<script type="text/javascript"> var vm = new Vue({ el: '#app', data: { items: [ { msg: 'one'}, { msg: 'two'}, { msg: 'three'} ], object: { name: 'xiaoming', age: 7 } } }); </script>
    	</body>
    </html>

##### 10. 事件绑定 #####

使用v-on进行事件绑定，它可以绑定当前元素所支持的任意一种事件。事件处理函数可以传参，也可以使用修饰符。如下：

<div id="app">
    	<button v-on:click="onClicked('abc', $event)">click me</button>
    </div>
    
    <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { name: 'vue' }, methods: { onClicked : function(str, e) { alert('Hello '+this.name+', '+str); console.log(e); } } }); </script>

##### 11. 表单输入绑定 #####

使用 v-model 进行表单输入绑定。  
不同的输入元素使用不同的 property 并抛出不同的事件：

*  text 和 textarea 元素使用 value property 和 input 事件；
 *  checkbox 和 radio 使用 checked property 和 change 事件；
 *  select 字段将 value 作为 prop 并将 change 作为事件。

v-model 是双向绑定，可以通过给data中的变量设置初始值的方法，反向设定表单元素的默认值。  
详见：[https://cn.vuejs.org/v2/guide/forms.html][https_cn.vuejs.org_v2_guide_forms.html]

##### 12. 组建基础 #####

用Vue.component()方法声明组件：  
组件可以复用  
组件的data是一个方法  
组件的prop可以用来向内传递数据  
组件必须有一个根元素，否则后续元素无法渲染  
组件可以通过$emit方法向外传递事件，或者抛出值  
通过组件的slot可以支持在外部向组件中插入html元素  
详见：  
[https://cn.vuejs.org/v2/guide/components.html][https_cn.vuejs.org_v2_guide_components.html]  
[https://learning.dcloud.io/\#/?vid=12][https_learning.dcloud.io_vid_12]

##### 13. 相关工具的安装 #####

*  npm安装  
    安装完node.js后，npm包管理工具就自动安装好了
 *  cnpm  
    这是中国版的npm，由于mirror的原因，可以更快的安装所需的包

npm install -g cnpm

*  vue-cli 脚手架工具

cnpm install -g @vue/cli

*  webpack （JavaScript打包器）

cnpm install -g webpack

[https_cn.vuejs.org_v2_guide_forms.html]: https://cn.vuejs.org/v2/guide/forms.html
[https_cn.vuejs.org_v2_guide_components.html]: https://cn.vuejs.org/v2/guide/components.html
[https_learning.dcloud.io_vid_12]: https://learning.dcloud.io/#/?vid=12