Vue2

下载vue.js

开发版本：vue.js
生产版本：vue.min.js

新建vue项目

• 安装node: https://nodejs.org/en
  cmd测试：node -v,npm -v
• 安装cnpm配置国内镜像
  npm install -g cnpm --registry=https://registry.npm.taobao.org
• 安装vue-cli
  cnpm install -g @vue/cli
• 安装打包工具
  cnpm install -g webpack
• 通过cmd执行vue ui命令，运行页面创建项目

基本语法

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
// 视图区
<div id="app1">
	{{msg.split('').reverse().join('')}}
	// 解析html
	<p v-html="msg"></p>
	// 不解析vue语法
	<p v-pre>{{name}}</p>
	// 单向绑定：v-bind:简写为':'
	<input :value="name"/>
	// 双向绑定
	<input v-model="msg2"/>{{msg2}}
	// 动态绑定
	<div :class="{class1 : false,class2 : false}">class1</div>
	<div :class="[true ? '' : 'class1','class2']">class2</div>
	<div :style="{color : false ? 'red' : 'green'}">style</div>
	// false时不渲染到页面
	<p v-if="false">v-if</p>
	<p v-else-if="false">v-else-if</p>
	<p v-else="true">v-else</p>
	// template标签不会产生dom结构，非常适合结合if使用
	<template><template>
	// false时不显示，页面依然有
	<p v-show="true">v-show</p>
	// 循环遍历
	<ul>
		<li v-for="item,index in items">
			{{index}} : {{item.name}}
		</li>
	</ul>
	<ul>
		<li v-for="value,key in objs" :key="key">
			{{key}} : {{value}}
		</li>
	</ul>
	// 事件绑定v-on:，不写方法参数默认传$event事件对象，或通过传入实参$event获取
	<button v-on:click="on">v-on</button>
	<div @click="click1">
		// .stop，阻止事件冒泡
		// .once，事件只触发一次
		// .prevent，阻止默认事件
		<div @click.stop="click2">click</div>
	</div>
	// 键盘事件
	<input @keydown="键盘落下"/>
	<input @keydown.enter="按下回车"/>
	<input @keyup.space="弹起空格"/>
	<p @mouseover="鼠标移入" @mouseout="鼠标移出">鼠标事件</p>
	// 计算属性：调用多次但是只执行一次
	{{computed1}}{{computed1}}{{computed1}}
	// '|'符号左边的内容都是过滤器的参数1，新增参数在过滤器后面加参数表
	{{name | filter1 | filter2('3') | filter3}}
	// 自定义指令text-1使用：v-text-1=""
	<p v-text-1="name"></p>
</div>
// 脚本区
<script>
	// 引入vue.js可以创建Vue实例
	var vm = new Vue({
		// el绑定的元素，就是此vue实例作用范围
		el : '#app1',//或在实例外通过vm.$mount("#app1")来挂载;
		// 数据区
		data : {
			name: 'zhangsan',
			msg: '
Hello World
',
			items : [
				// setter渲染问题：数组内元素发生改变，页面不一定发生变化
				// 因为数组内的元素没有set方法，不能渲染到页面
				// 可以通过push,pop等方法操作并渲染，直接赋值则不行
				{name : 'bob'},
				{name : 'jac'}
			],
			obj : {
				name : 'lisi',
				addr : 'bj'
			}
		},
		// 方法区
		methods : {
			function1 : function(){
			}
		}，
		// 计算属性
		computed:{
			computed1:{
				get() {
					console.log(this.name + '计算属性使用的变量变化时调用');
				}
			}
		}，
		// 侦听属性：vm实例观察变量的变化
		watch:{
			id:{
				deep: true,// 深度侦听，可以获取到侦听对象的属性
				func(newValue,oldValue){
					console.log(oldValue + " ==> " + newValue);
			}
		}，
		// 过滤器
		filters:{
			filter1(val){
				return val + ' 1';
			},
			filter2(val,val2){
				return val + '2' + val2;
			}
		},
		// 自定义指令
		directives : {
			// 用单引号包裹命名'-'连接，不要使用驼峰
			'text-1'(element,binding){// （element：使用此指令的元素对象，binding：指向的变量）
				element.innerText = binding.value;
				element.style.color = 'red';
			},
			// 指令与元素成功绑定时调用
			bind(b,d){},
			// 指令所在元素被插入页面时调用
			inserted(b,d){},
			// 指令所在的模板被重新解析时调用
			update(b,d){}
		}
		// 生命周期钩子（不能使用箭头函数，因为箭头函数没有this，而在生命周期过程中要频繁使用this）
		beforeCreate:function(){
			console.log('在实例初始化之后执行，在整个页面创建之前调用');
		},
		created:function(){
			console.log('在实例创建完成后立即调用');
		},
		beforeMount:function(){
			console.log('在挂载开始之前被调用');
		},
		mounted:function(){
			console.log('挂载成功之后调用，el被vm.$el替换');
		},
		beforeUpdate:function(){
			console.log('在数据更新之前调用');
		},
		updated:function(){
			console.log('数据、组件、dom已经更新完毕');
		}
	});
</script>

组件

<div id="app1">
	// 全局组件
	<component1 prop1="prop1" prop2="prop2" @event1="method1">
		自定义组件的template属性值中添加<slot></slot>才能嵌套html元素
	</component1>
	// 局部组件
	<com1></com1>
</div>
<script>
	// 全局组件注册
	Vue.component('component1',{
		// 自定义组件属性
		props : ['prop1','prop2'],
		data : function(){
			return {
				count : 0
			}
		},
		// template中，最外层只能有一个元素
		template : '
{{prop1}}{{prop2}}
',
		methods : {
			fun1 : function(){
				// 触发事件：this.$emit(事件名称，携带参数)
				this.$emit('event1',1);
			}
		}
	});
	var vm = new Vue({
		el: '#app1',
		data : {
		},
		methods : {
			method1 : function(e){
				console.log(e);
			}
		},
		// 局部组件注册
		components : {
			com1 : {
				template : ''
			}
		}
	});
</script>

单文件组件

// 新建test.vue文件
<template>
	<h1>test</h1>
</template>
<script>
	export default {
		name: 'test',// 命名最好用'-'连接或驼峰
		props: {
			prop1: {
				msg: 'test',
			}
		},
		methods: {
			fun1() {
			}
		},
		data() {
			return {
				status: 1
			}
		},
	}
</script>
<style>
</style>
// 使用组件
<test></test>// 使用
import testfrom './components/test.vue'// 引入
export default {
  name: 'App',
  components: {
    HelloWorld,
	test// 注册
  }
}