Vue.js核心概念与指令详解-优快云博客

vuejs

vue是一个渐进式的框架
三种安装方式：
1、CDN引入
2、npm
3、直接下载引入

可以不用直接操作DOM元素实现响应式，创建vue实例，传递一个对象作为参数。

el属性绑定需要管理的元素，值可以是string或者html元素
data用来存放数据（对象或者函数），组件中data必须为函数，可以是服务器上的，也可以是自定义。
methods表示定义的方法

vue的MVVM

model相当于数据层，view是DOM层，viewmodel相当于创建的vue实例

vue的生命周期

new一个vue实例的时候，其实内部做了一系列复杂的事情，当内部做到某个阶段时，会执行相应的回调函数

vue插值指令

0、mustache语法只能写在元素内容中

1、v-once
该指令后面不需要跟任何表达式；其表示元素和组件只渲染一次，不会随着数据的改变而改变。

//2、v-for

<li v-for="item in movies">{{item}}</li>
const app = new Vue({
	el:'#app',
	data:{
		message:'你好',
		movies:['海王','盗梦空间','少年派','星际穿越']
	}        
})

//3、v-on
情况一：如果该方法不需要额外参数，方法后可以不加括号
函数需要参数，但是没有传入，则函数的形参将会是undefined
情况二：该方法需要参数，但是省略了小括号，这时会默认将浏览器生成的event事件对象作为参数传进参数中
情况三：除了event参数，还需要其他参数，通过$event可以手动获取到event事件对象。如果不加 $event ，则会默认第一个参数为event事件对象

<button v-on:click="add">+</button>
const app = new Vue({
	el:'#app',
	data:{
	counter:0},
	methods:{
	add:function(){
		this.counter++;}
		}        
	})

v-on的常见修饰符：
.stop:相当于阻止事件冒泡调用event.stopPropagation
.prevent:相当于阻止默认行为调用event.preventDefault
.once:只触发一次回调函数
.keycode:当特定键触发时回调函数调用，如@keyup.enter = “keyUp”

4、v-html
将文本以html格式解析并显示

<div v-html="url"></div>
const app = new Vue({
	el:'#app',
	data:{
	message:'你好',
	url:'<a href="http://www.baidu.com">百度一下</a>'
	} 
})

5、v-text
类似mustache语法展示文本内容，但是使用并不方便灵活，不能显示其他文本内容。会覆盖掉

<div id="app" v-text="message"></div>

6、v-pre
把标签内的东西原封不动的显示出来，不做任何解析

<div id="app">{{message}}</div> //你好
<div id="app" v-pre>{{message}}</div> //{{message}}

7、v-cloak
在vue解析前，元素中有一个v-cloak属性
当vue解析之后，会将v-cloak属性删除

v-bind

v-bind用于绑定一个或者多个属性值，或者向另一个组件传递props值
1、动态绑定属性，比如a标签的href属性、img标签的src属性

<img v-bind:src="imgURL" alt="">
<img :src="imgURL" alt="">

语法糖：：

2、动态绑定class
对象语法：
class后面跟着包含键值对的对象，键是类名，属性是true或者false，最后会将所有为true的类显示出来。而且绑定的class和普通class是可以共存的

如果isActive为true，isLine为false，则最终显示为 class=“title active”

<h2 class="title" v-bind:class='{active:isActive,line:isLine}'>你好吗</h2>

数组语法：

<h2 class="title" :class="['active','line']">{{message}}</h2>
//可以写死成字符串的类，也可以写成变量，动态响应，而且与普通class也不冲突
<h2 class="title" :class="[active,line]">{{message}}</h2>

3、动态绑定style
对象语法
style后面跟一个对象，key是css属性名，value是对应属性的值，值可以来自data中的属性。

<h2 :style="{fontSize:finalSize +'px'}">{{message}}</h2>

数组语法
数组内是定义的一个个变量，变量对应的创建的对象

计算属性

1、基本用法
computed内所定义的对象相当于属性，可以直接拿来用

<h2>{{fullName}}</h2>
computed:{ 
	fullName:function(){
	return this.name +' '+this.message;
}

2、复杂用法
computed属性中的set、get方法，但是computed一般不会有set方法，所以为只读属性。
下面是完整写法，为了省略可以只写get方法，如下第二种，所以当直接使用属性fullName时，相当于调用的get方法

computed:{
	fullName:{
	set:function(newValue){
	const names = newValue.split(' ');
	this.firstName = names[0]
	this.lastName = names[1] 
	},
	get:function(){
	return this.firstName + " " + this.lastName
		}	
	}
}


computed:{ 
 fullName:function(){
 return this.name +' '+this.message;
}