vue基础知识

vue基础回顾

指令：指令是vue内置属性

v-model

数据双项绑定,用在input元素中.input的值发生改变会影响js中数据模型的值，数据模型发生改变会影响页面。

v-for(item,index)

,顾名思义循环。那个元素需要循环生成给那个加。v-for能遍历数组，对象，数字，字符串.第一个参数是遍历中的每个元素,第二个参数是索引。

v-on

绑定事件，全等于

@

；例如

v-onclick='fn' @click="fn"

v-bind

动态绑定属性，全等于

:

; 例如 v-bind:src=“变量” === :src=“变量”

v-cloak

页面中有小胡子语法，页面加载是从上到下。没有加载js的时候会出现{{}}

在样式中让包含这个属性的元素display:none;就会屏蔽掉，当vue记载完毕后就会自动变为block

axios

ajax请求要下载相应的包,语法

axios.get('url').then(()=>{}),

时间修饰符 .stop阻止冒泡、.prevent 阻止浏览器默认事件、.capture 变为捕获模式、.self 只有点自己的的时候才执行 .once触发一次事件 .passive 滚动事件

filters

Vue允许你自定义过滤器,可被用于一些常用的文本格式化。过滤器可以用在两个地方:双括号插值和一些常见文本格式化 :双括号插和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部 用管道符" | "

v-if,v-else

操作的是dom元素,

v-show

操作的是css样式 用法 v-show=“boolean值”

<div id='app'>
    <span>{{"好好学习" | addHeader}}</span>  //龙飞曰：好好学习
    <span>{{"天天向上" | addHeader}}</span>//龙飞曰：天天向上
    {{9000 | monty}}
</div>
Vue.filter("addHeader",function(val){//val就是传递需要过滤处理的值
            return "龙飞曰:"+val;//处理完之后返回出去
    })
           

computed

计算属性，computed里数据模型随着依赖的数据变化而变化。data里面的写过的数据模型在computed里面不能再次出现。计算属性里面的数据模型都有两个方法一个是get一个是set。默认是走get。只要写了这两个方法。属性获取值的时候就会默认走get。在设置值的时候默认走set(val),val是设置的值。computed不支持异步操作

watch

监听data里面指定数据模型的变化。和computed的用法一样。但是watch支持异步。

template

对v-show不起作用。相同的组件要加上key值重新渲染，template在渲染的时候会去掉template标签只显示内部子元素。

Vue的生命周期：beforeCreate()实例创建之前、created()实例创建之后、beforeMount()挂载dom元素之前、mounted()挂载dom之后、beforeUpdate()数据改变之前、updated()数据改变之后、beforeDestroy()销毁之前、destroyed销毁之后

Class

动态绑定：

1.对象形式,{active:isActive} {className:数据模型}

2.数组语法,[activeClass,hasError]数组里面写数据模型。

3.表达式: " isActive ? ‘active’ : ‘’ " 三元运算符

style

动态绑定：

1.对象形式。{key:value}

2.数组形式，[]数组里面写多个样式对象。

ref

属性： 被用来给元素或子组件注册引用信息。

引用信息将会注册在父组件的

$refs

对象上。如果在普通的 DOM 元素上使用，

引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$nextTick

,下一个嘀答.比如在点击事件的时候需要获取值,但是你会发现根本没有获取到。那是因为点击之后代码执行完了，页面还没渲染完毕所以没有获取到。页面渲染也是异步操作。

component组件，组件其实就是一个对象,每个组件里面都有一个template属性。局部组件的声明和定义变量一样。var tem={}; 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项data()要写成函数。组件嵌套那个组建需要就在那哥里面注册components

组件之间的通信：父传子是通过 给父元素动态动态属性，子组件用props=[]来接收数组里面的值可以直接使用。 字传父是通过动态给父元素绑定自定义事件.子组件在触发事件的时候发布事件(发布者) 父组件是订阅者执行事件。

slot插槽。想在组件中插入元素就要用插槽。如果没有指定的插槽,插入到默认的slot里面 是因为检测到有template则编译template放入渲染函数里面放在app里面,所以里面的代码就不执行。使用template内容替换app里面的内容。所以不显示。要用到插槽才能显示子组件调用父组件的方法 slot父组件调用子组件的方法

this.$refs

.组件名

keep-alive

是vue提供的标签,缓存在切换组件的时候不让销毁

兄弟通信：var EventBus = new Vue();//生成vue实例

EventBus

.$emit

(‘red’)发布消息。 EventBus.

$on

(‘red’, () => { this.isRed = true })订阅。

js文件是同步执行的。

想让js异步执行有两种方法: async 和 defer 属性

注： 所有的defer 脚本保证是按顺序依次执行的。

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。