Vue模板语法

vue是什么

是一个js的 mvvm 渐进式 视图 框架 mvvm mvc m model 数据层 c controller 核心业务代码 v view 视图 html/css

mvvm m 数据 v 视图 mv vm(vmodel vue实例) 当数据改变时，视图自动刷新 （通过vmodel vue的实例控制刷新）

学习vue需要注意什么

一切是数据为核心，使用数据来驱动视图刷新（不要想着去操作dom）

vue雏形

<div id="app"> {{ msg }} <!-- {{}} vue中的模板 用于渲染 数据 --> </div> script src="./vue.js" script let vm = new Vue({ el:"#app", //将vue挂在到el对应的元素上，也就是vue控制范围 data: { msg:"你好vue" // mvvm中 m数据放置的地方 } })

外部挂载 实例

let vm = new Vue({ data:{ msg:"hello vue" } }) vm.$mount(document.querySelector("#app")) //外部挂载vue

模板语法 {{}}

{{}} 模板 在视图中渲染数据 注意： 1，模板中 是js环境（要求放表达式或者值）（不会放语句） 2，模板中的变量 和 函数 必须是 实例上的属性或者方法 3，js全局函数 有些可以使用有些不可以 对于全局widnow下的方法设置白名单，只有在白名单下的方法 模板中才可以使用 'Infinity,undefined,NaN,isFinite,isNaN,' + 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' + 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' + 'require' 4，if结构不能用 ifelse也不能用 短路 && 代替if结构 || ifelse可以使用 三目 a?'aa':'xxx'

指令

扩展了 普通html属性的功能（用法同自定义属性) v-指令名=“值”

<div v-xxx="值"> v-model 将表单控件的value 属性 与 vue中的 数据 进行双向绑定v-text 不需要记 将元素 的文本内容 与 一个vue的数据进行绑定v-html 不管是v-text还是{{}}都不会渲染富文本数据 渲染富文本数据v-bind:属性 将一个普通的任意标签的属性（可以是自定义属性）的值，与vue一个数据进行绑定 简写： :属性v-on:事件 将vue元素的事件与vue的方法进行绑定 简写 @事件 绑定方式： 1， <button @click="fn">按钮</button> new Vue({ methods:{ fn(e){ // 这种绑定方式 fn就是事件函数，第一个参数就是事件对象 } } }) <button @click="fn()">按钮</button> // 需要传参的时候 new Vue({ methods:{ fn(){ // 这种绑定方式 fn是普通调用，不再是事件函数，需要得到事件对象需要手动传入 $event // $event 挂载到Vue.prototype上的 } } }) 方法中改变数据 this.数据 = 值 eg: { data:{ isShow:true }, methods:{ fn(){ this.isShow = !this.isShow } } } 事件修饰符 .stop 阻止事件冒泡 .prevent 阻止默认事件 .capture(捕获) 捕获阶段就提前触发 .self 只能自己触发 其后代元素无法触发 .once