Vue基础

vue是什么：vue是一个 js 渐进式框架

 

什么是渐进式？

  框架 并没有将 所有的 api 都 定义在核心包（vue.js）,而是设计了 一个拔插式方法（使用插件的），将其他一些功能定义在vue的插件中，使用了什么插件，框架就具备一些其他功能

 

 

vue的特点：

  1.声明式开发

  2.组件化开发

 

 

Vue常用语法：

1.插值语法： 

一般用于解析标签体内容  语法：{{表达式}}     插值语法可以读取data中的所有属性

2.指令语法：

指令语法 用于解析标签(包括：标签属性、标签体内容、绑定事件等)

 

vue的常用指令：

 v-bind:=>可以简写成： 可以给任何一个标签属性动态绑定值  单向绑定

 v-show 通过控制元素的display属性让其显示或隐藏（不占位

 v-model 双向绑定 数据不但能从data流向页面 可以从页面流向data 但它只能用在表单元素上

 v-html 用于渲染富文本数据

 v-on:事件 绑定vue事件（合成了原生事件）

 v-for：循环

 v-if：绑定一个布尔值 控制元素显示隐藏

 

 

事件对象

绑定方法时 不加括号 此时 方法是作为事件函数存在 所以第一个参数就是 事件对象

 

 

 

利用事件对象

1 取消冒泡 e.stopPropagation()

2 阻止默认事件 e.preventDefault()

3 获取事件源 e.target

 绑定方法时 加括号，那么 此时 方法 只是在 事件触发时调用了不是事件函数（第一个参数不是事件源）

此时 Vue提供了一个变量 $event 在调用时手动传入 $event 就可以拿到事件对象

 

 

 

vue的事件修饰符：

.1.stop  取消冒泡

 2.prevent  阻止默认事件

 3.capture 捕获阶段触发

 4.self 只能由自己触发 其后代元素无法 触发

 5.once 绑定一次

 

 

vue条件渲染

 单分支 v-if：控制元素隐藏显示

双分支 ：v-if + v-else

注意：

 v-else绑定元素一定是v-if绑定元素的下一个兄弟

多分支 ：v-if v-else-if v-else结合

注意：

  必须是连续的兄弟 且 v-if绑定元素是第一个兄弟 v-else是最后一个兄弟

 

 

 

 

  v-if和v-show异同点?

  相同点：绑定一个布尔值 控制元素显示隐藏

  不同点：值为false时 v-show绑定的元素 display:none

        v-if绑定直接从dom移除这个元素

  使用场景：

    在初始值为false，v-if有更高的初始渲染能力，v-if适用于初始不渲染，且状态切换频率没有那么高

    v-show适用于 频繁切换状态的场景