本文共 7355 字，大约阅读时间需要 24 分钟。
从各种视频和书中结合学习。做个笔记温故知新。
{
{msg}}
当我们导入包之后，在浏览器的内存中就多了一个Vue构造函数。注意：我们new出来的这个 vm对象,就是我们MVVM的vm的调度者。
el: '#app', ——表示当前我们new的这个vue实例,要控制页面上的哪个区域data:{},——这里的data就是mvvm中的m,专门用来保存每个页面的数据的，data属性中,存放得是el中要用到的数据。如果你会在之后某些时候需要一个属性，但是它一开始不存在或为空的时候，你就需要在data中设置一些初始值，比如：
data: { n1: 0, n2: 0, opt: '+', selection:false, list:[], error:null} 注意： Vue中所有的指令，在调用的时候，都以 v- 开头。
<p v-cloak>——v-cloak能够解决 插值表达式闪烁的问题。p为一个标签。<h4 v-text="msg">——默认v-text是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是 插值表达式只会替换自己的这个占位符，不会把整个元素内容清空。<p v-html>——可以让变量变成一个html元素，而不是一个普通的文本。v-bind:——vue提供的属性绑定机制，缩写"："。v-bind只能实现数据的单向绑定，从M自动绑定到v，无法实现数据的双向绑定。v-model="自定义事件"——可以实现表单元素和model中数据的双向数据绑定，注意:v-model 只能运用在表单元素中：比如 input(radio,text,address,email…)，select，checkbox，textarea。v-on:属性="自定义事件"——vue提供的事件绑定机制， 缩写’’@’’。在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了比如@click="add()"。this.intervalid = setInterval( () => {})——定时器。<p>{ { 1 == 1 ? 'YES' : 'NO' }}</p>——三元表达式。判断？前的布尔值类型。@click.stop——使用 .stop 阻止冒泡。 阻止单击事件继续传播。@click.prevent——使用 .prevent阻止默认行为。提交事件不再重载页面。@click.capture——使用 .capture实现捕获触发事件的机制。@click.self——使用 .self实现只有点击当前元素的时候，才会触发事件处理函数。.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止人家冒泡行为的触发。@click.prevent.once——使用 . once只触发一次事件函数。例如此处，点击第二次就不会阻止默认行为。证明，修饰符是可以串连的，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。<input v-model.lazy="msg" >——’.lazy’修饰符使得v-model在"change"时，而非"input"时更新。<input v-model.number="age" type="number">—— 如果想自动将用户的输入值转为数值类型，可以给v-model添加’.number’修饰符。即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。<input v-model.trim="msg">—— 如果要自动过滤用户输入的首尾空白字符，可以给v-model添加 ‘.trim’ 修饰符。add() { this.list.unshift({ })}——添加方法(添加在数组上方)，使用push({})时，为添加在数组下方。setTimeout(function(){}, 3000);——3000毫秒后，{}内的值变换到所定义的值。<p>{ { message.split('').reverse().join('') }}</p>——spilt将信息变成一个数组，reverse将数组元素反序，join重新将排序后的元素形成新的一个数组。v-for——关于v-for的一些用法：在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定 唯一的字符串/数字 类型 ：key值。以用来保证数据的唯一性。
注意：v-for循环的时候，key属性只能使用 number 获取string
注意：key 在使用的时候，必须使用v-bind 属性绑定的形式，指定 key 的值。
索引值:{
{i}} --- 每一项：{ {item}}
"item"为赋值的对象，"i"是索引。
ID:{
{user.id}} -- name:{ {user.name}}--索引：{ {i}}
这是第 {
{count}} 次循环
"in"后面我们放过：普通数组，对象数组，对象，还可以放数字 。注意：如果使用v-for迭代数字的话，前面的count值从1开始。还可以自定义一个方法，同时，把所有的关键字，通过传参的形式传递给这个方法。例如：
<tr v-for="item in search(keywords)" :key="item.id">。
这个是v-if控制的元素
这是v-show控制的元素
ABNot A/B
@keyup.enter="add"——按键修饰符，在文本框中敲击回车就触发add事件。add自己在methods中定义。Object.freeze()——使用在new的Vue实例之前，会阻止修改现有属性。this.list.splice(index， 1)——索引名用var自定义，这是删除列表中一行数据的方法。Vue.filter('dateFormat', function(dateStr, pattern) { //根据给定的时间字符串,得到特定的时间 var dt = new Date(dateStr) //yyyy-mm-dd var y = dt.getFullYear() var m = (dt.getMonth() + 1).toString().padStart(2, '0') var d = dt.getDate().toString().padStart(2, '0') var hh = dt.getHours().toString().padStart(2, '0') var mm = dt.getMinutes().toString().padStart(2, '0') var ss = dt.getSeconds().toString().padStart(2, '0') return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}` }) 过滤器的定义语法：Vue.filter(‘过滤器名称’,function(){})。过滤器中的function,第一个参数已经被规定死了,永远都是 过滤器 管道符 前面传递过来的数据。
例如：
Vue.directive('focus', { bind: function(el) { //,每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次 //注意,在每个函数中,第一个参数,永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象 //在元素,刚绑定了指令的时候,还没有插入到DOM中去,这时候,调用focus方法 //没有作用,因为,一个元素只有插入DOM,之后,才有获取焦点 }, inserted: function(el) { //inserted表示元素 插入到dom中的时候,会执行该函数,触发一次 el.focus() //和JS行为有关的操作,最好在inserted中去执行,防止JS行为不生效 }, updated: function() { //当VNODE更新的时候,会执行updated,可能会触发多次 } }) 使用Vue.directive()定义全局指令，其中:参数1: 指令的名称,注意,在定义的时候,指令的名称前面,不需要加v- 前缀，在调用的时候,必须在指令名称前,加上v-前缀进行调用。参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。
search(keywords) { /*var newlist = [] this.list.forEach(item => { if (item.name.indexOf(keywords) != -1) { newlist.push(item) } }) return newlist*/ //注意: forEach some filter(过滤) findIndex(找到对应的索引) 这些都属于数组的新方法 //都会对数组中的每一项,进行遍历,执行相关的操作 return this.list.filter(item => { // if(item.name.indexOf(keywords) != -1) //注意 : ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串') //如果包含,则返回true,否则返回false //contain if (item.name.includes(keywords)) { return item } }) } 使用transition元素，把 需要被动画控制的元素，包裹起来，transition元素是vue官方提供的元素。如下：
这是祖安人
此处的my则是自定义的一个前缀，可以区分不同组的动画。如下：
这是影流人
使用第三方类完成动画时——bounceIn为入场，bounceOut为离场。使用 ：duration="毫秒值" 来统一设置入场和离场时候的动画时长。如果使用:duration="{enter:200, leave:600}" 就可以分别设置入场的时长和离场的时长。
这是祖安人
var vm = new Vue({ el: '#app', data: { flag: false }, methods: { // 动画钩子函数的第一个参数el,表示要执行动画的那个DOM元素,是个原生的JS DOM对象 //el是通过 document.getElementById('')方式获取到的 beforeEnter(el){ // 表示入场之前,表示动画尚未开始,可以再before中设置元素动画开始之前的起始样式,位置 el.style.transform = "translate(0,0)" }, enter(el,done){ // 这句话没有实际作用,但是如果不写,就没有动画效果 // 可以认为 el.offsetWidth 会强制动画刷新. el.offsetWidth // 表示动画开始之后的样式,这里,可以设置小球完成动画之后的,结束状态. el.style.transform = "translate(150px,450px)" el.style.transition = 'all 1s ease' //这里的done,其实就是afterEnter这个函数,也就是说:done是afterEnter函数的引用 done() }, afterEnter(el){ //动画完成之后,会调用 //这句话第一个功能是控制小球的显示与隐藏 //第二个功能:直接跳过后半场动画,让flag标识符直接变为false //当第二次再点击按钮的时候,flag false -> true this.flag = !this.flag // el.style.opacity= 0.5 //Vue把一个完整的动画，使用钩子函数,拆分为了两部分: //我们使用flag标识符,来表示动画的切换; //刚一开始,flag = false----> true ---->false } }}) { {item.id}}----{ {item.name}}
实例创建阶段：
beforeCreate(){}——这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它，在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。也就是在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有初始化。
created(){}——这是遇到的第二个生命周期函数，在create中,data和methods都已经被初始化好了，然而，挂载阶段还没开始，$el 属性目前不可见。如果要调用 methods中的方法,或者操作data中的数据,最早,只能在created中操作。
beforeMount(){}——这是遇到的第三个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中，/在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。
mounted(){}——这是遇到的第四个生命周期函数,表示,内存中的模板已经真实的挂载到页面中,表示用户已经可以看到渲染好的页面了。注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示实例已经被完全创建好了。只要执行完了mounted ,就表示整个Vue实例已经初始化完毕了;此时,组件已经脱离了创建阶段;进入到了运行阶段。
接下来的是运行中的两个事件：
beforeUpdate(){}——数据更新时调用，这时候,表示,我们的界面还没有被更新,数据已经被更新了。当执行beforeUpdate的时候,页面中的显示数据,还是旧的,此时data数据是最新的,页面尚未和最新的数据保持同步。
updated(){}——组件 DOM 已经更新, 组件更新完毕 ，updated事件执行的时候，页面和data数据已经保持同步了,都是最新的。
实例销毁阶段：
beforeDestroy(){}——当执行beforeDestroy的时候,实例身上所有的data和所有的methods,以及过滤器,指令…都处于可用状态,此时,还没有真正执行销毁的过程。
destroyed(){}——当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组建中的左右数据，方法，指令，过滤器…都已经不可用了。
什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化和模块化的不同：
hi...h2
转载地址：http://fmugn.baihongyu.com/