vue系列

最新推荐文章于 2024-04-23 09:47:19 发布

翎羽飘

最新推荐文章于 2024-04-23 09:47:19 发布

阅读量585

点赞数

分类专栏：前端框架文章标签： mvvm

本文链接：https://blog.csdn.net/u014032819/article/details/74394913

版权

前端框架专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、快速入门

  1.使用vue的原因：页面交互多，，手动进行操作，代码难以维护。使用MVVM 框架能解决这个问题。 

  MVVM： view--ViewModel==Model 

   2. Vue的核心：通过尽可能简单的API实现相应数据绑定和组件的视图组件 
 

   数据驱动改变视图的自动更新； 
 

   视图组件化：将整个网页拆分成一个个区块，每个区块看做一个组件。 
 

   使用场景：项目中需要频繁操作DOM、多部分相同 
 

   二、快速安装（脚手架webpack工具） 
 

   1. 淘宝镜像 cnpm： 
  https://npm.taobao.org/：下载淘宝镜像压缩包 
 

 
  $ npm install -g cnpm --registry= 
  https://registry.npm.taobao.org

 
  $cnpm install --global vue-cli 
 

 
  $vue init webpack my-project(项目名称) 
 

 
  安装依赖：$cd my-project 
 

 
  $npm install 
 

 
  $npm run dev 
 

 
数据驱动视图： 
 

<div id="app">
hello {{name}} // 4.渲染
</div>
<script>
let vm = new Vue({   //创建一个实例    1.创建实例语法
el:"#app", //3. 挂载元素
data:{
name:"Mary" //2.设置数据
}
});
</script>

3.双向绑定：vue提供语法指令

<div id="app">
<input v-model="number">
<p>Number:{{number}}</p>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
number:"",
}
}),
</script>

4. 组件化：把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。

<div id="app">
<card></card>
<card></card>
<card></card>
</div>

<script>
//注册一个名叫card的组件，放在component文件夹中
Vue.component('card',{
template:`<div>
<img src="logo.png" alt="">
<h2>web</h2>
<p>describe</p>
<button>button</button>
</div>`
});

 
  三、4个常用选项 
 

 
filters过滤器 
 

filters:{
    toInt:function(value){
        return parseInt(value);
    }
}

 
  html中： 
 

<div id="app">
num1:{{num1 | toInt}}<br>
num1:{{num1 | toInt}}<br>
num1:{{num1 | toInt}}
</div>

 
computed 计算属性 
 

 
  拿到数据，需要计算后得出属性： 
 

let vm = new Vue({
///挂载元素
el:'#app',
//实例vm的数据
data:{
num1:1,
num2:3,
num3:6
},
//计算属性
computed:{
sum(){
return this.num1+this.num2+this.num3
}
}
});

<div id="app">
total:{{sum}}
</div>

 
methods方法 
 

let vm = new Vue({
el:"#app",
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
}
});

<div id="app">
{{a}}	
<button v-on:click="plus">add 1</button>
</div>

 
watch观察 
 

 
  Vue提供的用于检测指定数据发生改变的api 
 

let vm = new Vue({
el:"#app",
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
}，

watch:{
a(){
     console.log('changed');
     console.log(this.a);
}
});

<div id="app">
{{a}}	
<button v-on:click="plus">add 1</button>
</div>

 
   五、生命周期 
  

 
beforeCreate：实力初始化后，数据观察和事件配置都没准备好 
  

<div id="app">{{name}}</div>
<script>
let app=new Vue({
el:"#app",
 data:{
name:"前端“
},
beforeCreate(){
console.log('即将创建‘);
console.log(this.$data);
console.log(this.$el);
}
});
</script>

2 .created:beforeCreate之后的钩子。能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出$data为一个object对象，而$el的值为undefined。

<div id="app">{{name}}</div>
<script>
let app=new Vue({
el:"#app",
 data:{
name:"前端“
},
beforeCreate(){
console.log('即将创建‘);
console.log(this.$data);
console.log(this.$el);
}，
created(){
console.log('创建完毕');
conosle.log(this.$data);
console.log(this.$el);
}
});
</script>

3. beforeMount：挂载,$el不再是undefined，而是成功关联到我们指定的dom节点，但是name还没有成功渲染我们data中的数据。

<div id="app">{{name}}</div>
<script>
let app=new Vue({
el:"#app",
 data:{
name:"前端“
},
beforeCreate(){
console.log('即将创建‘);
console.log(this.$data);
console.log(this.$el);
}，
created(){
console.log('创建完毕');
conosle.log(this.$data);
console.log(this.$el);
}，
beforeMount(){
console.log('即将挂载');
console.log(this.$el);
}
});
</script>

4. mounted：挂载完毕，数据渲染成功

<div id="app">{{name}}</div>
<script>
let app=new Vue({
el:"#app",
 data:{
name:"前端“
},
beforeCreate(){
console.log('即将创建‘);
console.log(this.$data);
console.log(this.$el);
}，
created(){
console.log('创建完毕');
conosle.log(this.$data);
console.log(this.$el);
}，
beforeMount(){
console.log('即将挂载');
console.log(this.$el);
}，
mounted(){
console.log('挂在完毕’）；
console.log(this.$el);
}
});
</script>

5. beforeupdate:修改vue实例的data时，vue会自动更新渲染视图，在这个过程中，vue提供beforeUpdate的钩子给我们，在检测我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。

<div ref="app" id="app">   <!--ref用于获取dom-->
{{name}}
</div>

beforeUpdate(){
console.log('即将更新渲染‘);
let name = this.$refs.app.innerHTML;
console.log('name':+name);
},

6. updated：更新渲染视图之后，再读取

 
  六、 在html中绑定数据 
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>style绑定</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p :class="{'active':isActive}">This is binding class</p>
			<p :class="[activeClass,errorClass]">This is array style</p>
			<p :style="{color:colorStyle}">This is style</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					//isActive:true
					activeClass:'avitve',
					errorClass:'error',
					colorStyle:'red'
					}
					
			})
		</script>
	</body>
</html>

 
Mustache语法:{{}} 
 

 
绑定纯html：带有html标签，不能用{{}} 
 

<div id="app" v-html="name"></div>
<script>
let app=new Vue({
el:"#app",
data:{
name:"<strong>前端</strong>"
}
});
</script>

 
属性绑定：控制html标签的属性。使用v-bind绑定属性。（<a>的href标签，<img/>标签的src属性） 
 

 
  简写为 
  ：href=“link” 
   ==  
  v-bind:href"link" 
 

 
支持javascript 
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{num+3}}
			{{ok?'yes':'no'}}
			<a :href="'http://'+host">baidu</a>
		</div>
		<script>
			let app=new Vue({
				el:"#app",
				data:{
					num:2,
					ok:true,
					host:"baidu.com"
				}
			});
		</script>
	</body>
</html>

   加减乘除运算：<div id="app">{{num+3}}</div>； 
 

   三元运算:<div id="app">{{ok? 'yes':'no'}}</div>； 
 

   字符串拼接<div id="app"><a href="'http://'+host">hello官网</a></div>； 
 

   七、 十个指令 
 

    1. v-text：用于更新标签包含的文本，与双大括号效果相同。 
  

    2. v-html：绑定包含html代码的数据在视图上。 
  

    3. v-show：控制元素display css属性。 
  

    4. v-if指令：控制元素是否需要被渲染出来。 
  

    5. v-else：无对应值，但要求前一个兄弟节点必须使用v-if指令。 
  

    6. v-for：data中存放的数据不是简单的数字或字符串，而是数组Array类型。使用这个指令实现列表渲染。循环时加上index可以获取元素的索引。 
  

    7.v-bind：动态绑定DOM元素。 
  

    8. v-on：相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。 
  

    9. v-model：用于表单输入，实现表单控件和数据的双向绑定。 
  

    10. v-once：只渲染一次，后面元素中的数据再更新变化都不会重新渲染。 
  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>指令</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-text="msg"></p>
			<p>{{msg}}</p>
			<p v-html="htmlmsg"></p>
			<p v-show="show1">true</p>
			<p v-show="show2">false</p>
			<p v-if="if1">if:true</p>
			<p v-if="if2">if:false</p>
			<p v-else>else</p>
			<div v-for="item in list">{{item}}</div>
			<div v-for="(item,index) in list">{{index}}.{{item}}</div>
			<button v-on:click="say('Tom')">click</button>
			<input v-model="inputmsg" type="text" />
			<p>you input:{{inputmsg}}</p>
			<input v-once="oncemsg" type="text" />
			<p>you input:{{oncemsg}}</p>
		</div>
		<script>
			let app = new Vue({
				el:"#app",
				data:{
					msg:'hello world',
					htmlmsg:'<b>hello world',
					show1:true,
					show2:false,
					if1:true,
					if2:false,
					inputmsg:'',
					oncemsg:'hoho',
					list:['Tom','John','Lisa']
				},
				methods:{
					say(name){
						console.log('hello'+name);
					}
				}
			});
		</script>
	</body>
</html>

   八、 组件 
 

   1.创建一个vue实例vm，挂载元素 
 

   在创建实例vm之前，利用vue提供的API来注册一个组件（Vue.component()）。 
 

   使用组件。 
 

   数据动态展示：把数据存储在实例vm的data中 
 

   动态传参：使用props 
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!--<script>
			Vue.component('my-component',{
				template:'<span>{{message}}</span>',
				data:{
					message:'hello'
				}
			})
			
		</script>-->
		<div id="example-2">
			<simple-counter></simple-counter>
			<simple-counter></simple-counter>
			<simple-counter></simple-counter>
		</div>
		<script>
			var data={counter:0};
			Vue.component('simple-counter',{
				template:'<button v-on:click="counter += 1">{{counter}}</button>',
				data:function(){
					return data
				}
			})
			
			new Vue({
				el:"#example-2"
			})
		</script>
	</body>
</html>

   九、 实现vue组件之间的通信 
 

   1. 父组件——子组件 
 

   组件实例作用域相互孤立，所以子组件在模板template中不能引用父组件的数据。 
 

   使用props使子组件能够使用父组件数据。 
 

   1）创建容器 
 

   2）实例化 
 

   3）注册子组件 
 

   放在实例化之前，否则会报错 
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件通信</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<son :message="msg"></son>
		</div>
		<script>
			//父组件向子组件
			//注册子组件
			Vue.component('son',{
				props:['message'],
				template:`<div>{{message}}</div>`
			});
			const app = new Vue({
				el:"#app",
				data:{
					msg:"I am data of father component"
				}
			});
			
		</script>
	</body>
</html>

   2 子组件到父组件 
 

   1）注册新组件：一个button，点击触发send方法，方法触发事件connect 
 

   2）在父组件中监听事件：connect触发的处理程序是say()方法 
 

   3）在实例中定义say()方法： 
 

   4）在子组件中定义数据 
 

   5）在父组件中say接受 
 

   3. 非父子组件通信：利用空vue实例 
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件通信</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<son @connect="say"></son><!--v-on的缩写用@符号-->
		</div>
		
		<script>
			Vue.component('son',{
				template:`<button @click="send">
							Click
						  </button>`,
				data(){
					return{
						msg:' I am data of son'
					}
				},
				methods:{
					send(){
						this.$emit('connect',this.msg);//触发事件的API
					}
				}
			});
			
			const app=new Vue({
				el:"#app",
				methods:{
					say(msg){
						console.log(msg);
					}
				}
			});
		</script>
	</body>
</html>

   九、 动态绑定class、style 
 

   1. 绑定class： 
 

   对象语法：动态绑定class是一个对象{}，给class绑定一个对象：{'active:isActive}，isActive是我们vm实例的数据，值为true。class的值最后被渲染成“active”，在对象中，若该属性对应的value为true，该属性会被渲染出来，为false，则不被渲染出来。 
 

   数组语法：class绑定值为一个数组，数组的元素，对应vm实例的数据data。 
 

   渲染时，activeClass和errorClass对应的值会被渲染成class 
 

   2. 绑定内联样式style 
 

   对象语法： 
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>style绑定</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p :class="{'active':isActive}">This is binding class</p>
			<p :class="[activeClass,errorClass]">This is array style</p>
			<p :style="{color:colorStyle}">This is style</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					//isActive:true
					activeClass:'avitve',
					errorClass:'error',
					colorStyle:'red'
					}
					
			})
		</script>
	</body>
</html>

  十、transition组件过渡效果 

  1.transition组件起作用的情况： 

   1. 条件渲染（使用v-if） 

   2. 条件展示（使用了v-show） 

   3. 动态组件 

   4. 组件根节点 

  2.过渡原理：Vue自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。 

  1.v-enter：进入过渡效果（enter）刚刚开始那一刻。在元素被插入或者show的时候生效，在下一个帧就会立刻移除，一瞬间的事。 

  2.v-enter-active: 表示进入过渡（entering）的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。 

  3.v-leave: 离开过渡（leave）的开始那一刻。在离开过渡被触发时生效，在下一个帧移除，也是一瞬间的事。 

  4.v-leave-active：离开过渡（leaving）的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>transition</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app" class="app">
		    <button class="btn" @click="showBox = !showBox">切换</button>
		    <div class="container">
		    	<transition name="box">
			    	<div v-show="showBox" class="box">
			    		I am the box
			    	</div>
			    </transition>
		    </div>
		 </div>
	</body>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				showBox:false
			}
		});
	</script>
	<style>
		.box{
			width:100%;
		    height:100%;
		    text-align: center;
		    line-height: 200px;
		    background: #ff8282;
		    color: #Fff;
		    /*以下两个默认值，可不写*/
		    /*写上只是为了便于讲解，记住这两个*/
		    opacity: 1;
		    margin-left: 0;
		}
		.box-enter-active,.box-leave-active{
		    transition: all .8s;
		 }
		 .box-enter{
		    opacity: 0;
		    margin-left: 100%;
		 }
		 .box-leave-active{
		    opacity: 0;
		    margin-left: 100%;
		 }
	</style>
</html>

  当它进入过渡的时候（隐藏→显示），就会依次发生： 

      1. 添加.box-enter 

      2.  删除.box-enter，添加 .box-enter-active 

      3.  删除.box-enter-active 

  当它离开过渡的时候（显示→隐藏），就会依次发生： 

      1. 添加.box-leave 

      2. 删除.box- leave，添加 .box- leave-active 

      3. 删除.box- leave -active 

 
 注意：vue要升级到2.0，否则不支持这些。 

  十一、 vue-router 

  Vue.js的官方路由插件，和vue.js深度集成，适合用于构建SPA单页面应用。通过将网页应用做成单页面应用，用视图切换隐藏和显示能够模拟页面切换。提供<router-link/>, <router-view/>两个新组件。 

  1.引入vue.js， vue-router.js 

  2.<router-view>渲染匹配到的视图组件（<router-link>指向的目标地址） 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue-router</title>
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="nav">
				<!----to指定链接---->
				<router-link to="/vue">
					vue
				</router-link>
				<router-link to="/react">
					react
				</router-link>
				<router-link to="/angular">
					angular
				</router-link>
			</div>
			<div class="content">
				<router-view></router-view>
			</div>
		</div>
	</body>
	<script>
		const vueComponent = {
			template:`<div> this is vue </div>`
		};
		
		const reactComponent = {
			template:`<div> this is react </div>`
		};
		
		const angularComponent = {
			template:`<div> this is angular </div>`
		};
		
		//关联导航地址和组件
		const router = new VueRouter({
			routes:[
			   {
			   	path:"/vue",
			   	component: vueComponent
			   },
			   {
			   	path:"/react",
			   	component: reactComponent
			   },
			   {
			   	path:"/angular",
			   	component: angularComponent
			   }
			]
		});
		
		//创建vue实例，注入路由router
		const app = new Vue({
			el: "#app",
			router
		})
	</script>
</html>

  十二、Vuex 

  Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 

  就是用来管理所有组件公共数据的一个仓库。一旦一处改变，所有地方的这个数据都会改变。 

  1.创建仓库Store，用来对状态进行管理 

  2. 三个核心概念： 

  1）State：Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。这个数据可以作为全局的key value 

//创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

  2）Getters：类似vue中的computed，需要在state的基础上派生一些状态时使用getters。 

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
    },
    //派生出来的状态
   getters:{
      //ES6 的箭头函数语法
    newCount:state => state.count * 3
    }
 });

  3）Mutations：修改仓库store中状态的唯一方法。 

const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    //更改store状态的唯一途径
    mutations:{
        increment(state){
            state.count ++;
        }
    }
 });

  3.实现计算器： 

  1）安装vuex 

  2）创建仓库store： 

  3）定义组件：16个键键值放入vue实例的data中 

  4）页面布局： 

  5）创建vue实例 

  const app = new Vue({ 

      //挂载元素 

      el:"#app", 

});

  6）加入16键的键值 

  7）利用vue提供的v-for指令和 <keyboard/> 组件，实现键盘区域的渲染。 

  <div class="list"> 

  <!--键盘区--> 

  <keyboard v-for="item in keys" :value="item"> 

  </keyboard> 

  </div> 

  8）这个时候result和enter是应用层状态，定义在store上。将store和vue关联起来。Vuex提供了store选项，允许我们将仓库store引入到根组件，并且此跟组件的所有子组件都可以使用到仓库store，而且子组件无需显示的引入。 

  这样可以通过this.$store访问到它。 

  将store引入后，state中的应用层数据result和enter可以被使用。因为计算结果result和输入值enter经常会被 <keyboard/> 组件操作更新，所以我们这里需要使用Vue的computed计算属性。将store状态关联到实例中的计算属性result和enter。仓库中值变化，实例会随之变化。 

  9）将result和enter绑定 

  10）修改组件，点击键盘时提交mutation，并把当前按键值传过去。 

  11）在仓库中定义名为calculation的mutation。 

  5. 总流程图 

代码的github地址：https://github.com/YZlingyu/Vue-basic-learning
这个是前端教程公众号Vue的学习笔记

感觉作者写的很好，就在这整理一下学习笔记。

翎羽飘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue系列

一、快速入门1.使用vue的原因：页面交互多，，手动进行操作，代码难以维护。使用MVVM 框架能解决这个问题。MVVM： view--ViewModel==Model2. Vue的核心：通过尽可能简单的API实现相应数据绑定和组件的视图组件数据驱动改变视图的自动更新；视图组件化：将整个网页拆分成一个个区块，每个区块看做一个组件。使用场景：项目中需要频繁操
复制链接

扫一扫