MVVM
vue的生命周期：
Mustache语法：写在内容那里
v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。可以用于优化更新性能
v-html：将字符串html解析，就是再网页上显示html渲染后的语言，直接返回对应的html
v-text：再网页上展示文本内容，但是不如mustache灵活
v-pre：不进行解析，写什么就显示什么
v-cloak：防止未渲染（了解）
v-on：添加事件监听，相当于@ 对应的响应在methods中设置
<button v-on:click="btnclick">按钮</button>
然后再
const app=new vue({
el:#app,
methods:{
btnclick:function(){
this.isActive=!this.Active
}
}
})
v-bind的基本使用
<img v-bind:src="imgURL" alt=""> //动态赋值，并不是写死了
语法糖： <img :src="imgURL" alt=""> //加个冒号
v-bind动态绑定class： ：class={"key:boolean"}
//以键值对的形式绑定
v-for：遍历数组 v-for="(i,index) in Array" 遍历对象如果只用一个值，获取到的是value，想要获取key和value的话 ( v-for="(value,key) in obj" ,使用v-for时，尽量再绑定一个key，但是要保证key中的值是唯一 的 :key="item"
v-bind绑定style： ：style="{key(属性名)：'value'(属性值)}" 也可以封装一个函数放在methods里面，加单引号就是字符串，不加单引号就是变量。
计算属性：计算属性一般没有set方法，若没有set方法就为只读属性。
computed:{函数} //计算属性调用时不需要加()
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName: {
set(newValue) { //修改值时调用set方法，将值变成参数调用。可以不写set 只写get，调用时不可以加()。this.firstName = names[0]
this.lastName = names[1]
},
get() {
return this.firstName + ' ' + this.lastName
}
}
}
})
计算属性的缓存：尽量使用computed而不使用methods，
v-on（事件监听）基本使用和语法糖：
v-on:click=" " 相当于 @click = ""
在事件监听时，click=" "调用，若不需要传入参数可以不添加() @click="btnClick"
<div id="app">
<h2>点击次数: {{counter}}</h2>
<!--情况一: 方法没有参数-->
<button @click="btnClick1">按钮1</button>
<button @click="btnClick1()">按钮1</button>
<!--情况二: 如果方法有参数-->
<!--1.调用时不传入参数,会默认将event作为第一个参数传入-->
<button @click="btnClick2">按钮2</button>
<!--2.调用时不传入参数,那么参数为undefined-->
<button @click="btnClick2()">按钮2</button>
<!--情况三: 如果方法有参数,并且希望传入event-->
<button @click="btnClick3(10, $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick1() {
console.log('按钮1被点击');
},
btnClick2(payload) {
console.log('按钮2被点击', payload);
},
btnClick3(num, event) {
console.log('按钮3被点击', num, event);
}
}
})
v-on的修饰符：
@click.stop=" " //停止事件冒泡
@submit.prevent //阻止默认行为
@ketup.enter=" " //监听回车键帽
@click.once="" //某监听事件只监听一次
v-if v-else-if v-else:
v-if="判断语句或者变量" //变量在data中有判断语句 true为显示，false为隐藏
v-else 放在标签中代表 v-if中的判断语句为false时显示v-else标签中的语句
v-eles-if不推荐使用，若判断语句多的话 可以放在computed中。
v-show：隐藏标签，相当于display：none 语法 v-show:false //隐藏元素（display）
vue修改数组中的值(响应式)： Vue.set(this.数组，想要修改的位置，修改后的值)
for in //遍历后返回属性名（遍历对象，一定不要去遍历数组） for of //遍历后返回索引对象
返回值放入数组中
累加
表单绑定v-model：一般用于input或者textarea，实质是绑定了两个指令 1.v-bind绑定一个value属性，2.v-on指令给当前元素绑定input事件
<input type="text" v-model="message"> //修改input中的值时，message同时被绑定，一起修改
v-model和radio绑定： v-model:radio radio是选项，其中有name属性是同一个值才可以互斥，或者v-model是同一个值也可以互斥
checkbox多选框：单选框对应布尔值，多选框对应数组类型
单选框：select 里面放的 option
v-model修饰符的使用：
lazy：在表单中，相互绑定的标签是动态修改的，我们在v-model.lazy后绑定的标签，在失去焦点或者敲击回车后才可以显示
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
number： <input type="number" v-model.number="age"> //type=“number”只能输入数字，但是显示为string类型，在v-model后.number自动将string类型转换为number类型
trim：去除两边空格， <input type="text" v-model.trim="name">
组件化：组件的使用分为三个步骤：1.创建组件构造器 Vue.extend() 2.注册组件 Vue.conponent() 3.使用组件
<div id="app"> //<!--3.使用组件--> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> <div> <div> <my-cpn></my-cpn> </div> </div> </div> <my-cpn></my-cpn> <script src="../js/vue.js"></script> <script> // 1.创建组件构造器对象 一个构造器只能用一个模板 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容, 哈哈哈哈</p> <p>我是内容, 呵呵呵呵</p> </div>` }) // 2.注册组件 Vue.component('my-cpn', cpnC) // 传入两个参数'my-cpn'标签名 cpnC构造器对象 这个组件为全局组件，意味着可以在多个Vue的实例下面使用，若想注册局部组件，则在实例中进行components const app = new Vue({ el: '#app', data: { message: '你好啊' }
components:{cpn:cpnC} //cpn为使用组件时的标签名 （局部组件） }) </script>
父组件和子组件之间的区别：子组件的注册组件放在父组件创造构造器里面注册 ，父组件的注册组件放在vue实例里面注册，vue实例称为root组件
组件模板抽离：
<!--2.template标签-->
<template id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容,呵呵呵</p>
</div>
</template> //然后在template中输入id (#cpn) 正确写法为:template:'#cpn'
组件化的数据存放问题
// 1.注册一个全局组件 Vue.component('cpn', { template: '#cpn', data() { return { title: 'abc' } } //数据存放在data函数中，并且返回的是一个对象 })
父子组件的访问方式：
父访问子：$refs props主要传输数据，refs调用方法 子访问父：$parent 访问根组件：$root
<cpn ref="aaa"></cpn> <button @click="btnClick">按钮</button> methods: { btnClick() { console.log(this.$refs.aaa.showMessage); } } //父组件的btn去访问子组件的showMessage
slot-插槽的使用
目的：让我们封装的组件更有
1.插槽的基本使用 <slot></slot> //放在template中用div和所有元素包裹起来 2.插槽的默认值 <slot><button></button></slot> 3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
具名插槽
<div id="app">
<cpn>
<button slot="center">sahdah</button>
</cpn>
</div>
<template id="cpn">
<div>
<slot name='left'><button></button></slot>
<slot name='center'><button></button></slot>
<slot namer='right'><button></button></slot>
</div>
</template>
webpack的使用：
webpack ./src/main.js ./dist/bundle02.js //将红色打包到蓝色
common.js module.exports( ) //导出 const { } = require('文件地址') //导出
Runtime + Compiler 中 Vue 的运行过程:
(1)首先将vue中的模板解析成abstract syntax tree （ast）抽象语法树
(2)将抽象语法树再编译成render函数
(3)将render函数再转换成virtual dom，也就是虚拟dom
(4)最后将虚拟dom显示在浏览器上
而 Runtime-only 只需2步：
(1)将render函数再转换成virtual dom，也就是虚拟dom
(2)最后将虚拟dom显示在浏览器上