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}}
单文件组件
// 新建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// 注册
}
}