网站建设会议议程,高端网站建设,粪池怎样建设,自学软件开发从哪开始文章目录1. 模板语法1.1 插值语法1.2 指令语法2. 数据绑定3. 穿插 el 和 data 的两种写法4. MVVM 模型1. 模板语法 root 容器中的代码称为 vue 模板 1.1 插值语法 1.2 指令语法 图一 #xff1a; 简写 #xff1a; v-bind: 是可以简写成 #xff1a; 的 总结 #xff1a; …
文章目录1. 模板语法1.1 插值语法1.2 指令语法2. 数据绑定3. 穿插 el 和 data 的两种写法4. MVVM 模型1. 模板语法 root 容器中的代码称为 vue 模板 1.1 插值语法 1.2 指令语法 图一 简写 v-bind: 是可以简写成 的 总结
插值语法
功能 用于解析标签体内容写法 : {{xxx}} xxx 是 js 表达式 切可以直接读取到 data 中的所有属性
指令语法 :
功能用于解析标签 (包括 标签属性 标签内容 绑定事件 …)举例 : v-bind:href “xxxx” 或者简写为 :href“xxx” xxx 同样要写 js 表达式 ,且可以直接读取到data中的所有属性备注 Vue 中有很多的指令 且形式都是: v-??? 此处使用 v-bind 举例 2. 数据绑定 引出 v-model 单向绑定 双向绑定 : 注意v-model 只能应用在表单类元素 (输入类元素) 上 v-model 简写 总结
Vue 中有两种数据绑定的方式 : 单向数据绑定(v-bind) 数据只能从 data 流向页面. 双向绑定 (v-model) 数据不仅能从 data 流向页面 还可以从页面流向 data . 备注 1. 双向绑定一般都应用在表单类元素上 (如 input , select 等) 2. v-model value 可以简写为 v-model 应为 v-model 默认手机的就是value值 3. 穿插 el 和 data 的两种写法 原来我们的写法
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleel和data的两种写法/title!-- 引入 vue --script src../../js/vue.js/script
/headbodydiv idrooth1Hello {{name}}/h1/divscriptlet vm new Vue({el: #root,data: {name: 大古}})// 通过 console.log 观察 vue 的实例对象 console.log(vm)/script
/body/html下面来看看 vue 的实例对象 data 的两种写法 : 对象式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleel和data的两种写法/title!-- 引入 vue --script src../../js/vue.js/script
/headbodydiv idrooth1Hello {{name}}/h1/divscriptlet vm new Vue({el: #root,// 对象式data: {name: 大古}})/script
/body/html函数式
bodydiv idrooth1Hello {{name}}/h1/divscriptlet vm new Vue({el: #root,// 函数式 :data: function () {return {name: 大古}}})/script
/body注意 当前 data 函数中的 this 是 vue 实例对象 另外 这里写成 箭头函数 data 函数中的 this 就是 window 总结
data 与 el 的 两种写法 el 有两种写法 a. new Vue 时候 配置 el 属性 b. 先创建 Vue 实例 随后再通过 vm.$mount(‘#root’) 指定 el 的值 data 有两种写法 : a.对象式 b.函数式 如何选择 目前那种写法都可以 后面学到组件时 必须使用函数式 要不然会报错 一个重要原则 a.由Vue 管理的函数 一定不要写箭头函数 一旦写了箭头函数 this 就不再是Vue 实例了 4. MVVM 模型 引用 从上面可以知道 vue 是参考了 MVVM 模型的 下面就来看看 vue 通过 MVVM 模型设计出来了 什么。 先看模型 别看 MVVM 是 四个字母 其实就 三个
M模型Model —也就是data中的数据V视图View —也就是模板代码VM视图模型ViewModel —也就是Vue实例vm 补充 :
