查询海外whois的网站,做配音的网站,深圳航空公司官网首页,自动引流推广app文章目录 一、模板语法1.1 插值语法1.2指令语法 二、数据绑定语法2.1 单向数据绑定2.2 双向数据绑定 三、el与data的两种写法3.1 el3.2 data 四、数据代理4.1 Object.defineProperty4.2 Vue数据代理4.2.1 展示数据代理4.2.2 Vue数据代理 一、模板语法
root容器里面的代码被称为… 文章目录 一、模板语法1.1 插值语法1.2指令语法 二、数据绑定语法2.1 单向数据绑定2.2 双向数据绑定 三、el与data的两种写法3.1 el3.2 data 四、数据代理4.1 Object.defineProperty4.2 Vue数据代理4.2.1 展示数据代理4.2.2 Vue数据代理 一、模板语法
root容器里面的代码被称为【vue模板】
Vue模板语法有两大类:插值语法、指令语法
插值语法一般动态指定标签体内容解析标签体内容
指令语法一般动态指定标签属性值解析标签
1.1 插值语法
插值语法
功能用于解析标签体的内容
语法: {{xxx}}****xxx是js表达式且可以直接读取到data中的所有属性
!DOCTYPE html
htmlheadmeta charsetUTF-8title 初识vue/title!--引入vue 引入之后全局就多了一个vue这个构造函数--script typetext/javascript src../js/vue.js/script /headbodydiv idrooth1插值语法/h1h3你好,{{name}} /h3hr//divscript typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalse new Vue({el:#root,data:{name:jack}})/script /body
/html1.2指令语法
假如我们使用下图的方式获取data中url的内容控制台会有一个报错
a :hrefurl点我去一个好地方/anew Vue({el:#root,data:{name:jack,url:http://www.baidu.com}报错信息插值语法去动态指定标签里面的属性值的方式已经被移除了我们可以使用v-bind或 :id“val”也就是指令语法 指令语法
功能用于解析标签包括标签属性、标签体内容、绑定事件…
举例
v-bind:href“xxx” 可简写成 :href“xxx” xxx同样要写js表达式且可以直接读取到data中的所有属性 备注Vue中有很多的指令且形式都是v-??? div idrooth1插值语法/h1h3你好,{{name}} /h3hr/h1指令语法/h1!-- 带有v-的都是指令语法 bind是绑定的意思 --!-- 在这个地方把url的结构绑定给href url为js表达式 --!-- v-bind可以动态的给属性绑定值 --!-- a v-bind:hrefurl点我去一个好地方/a --!-- 其中v-bind都可以省略写成 --a :hrefurl点我去一个好地方/a/divscript typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalse new Vue({el:#root,data:{name:jack,url:http://www.baidu.com}})/script 原因下面的url被当做url表达式来执行了
a v-bind:hrefurl二、数据绑定语法
Vue中有两种数据绑定方式
1.单向绑定v-bind数据只能从data流向页面
2.双向绑定v-model数据能从data和页面互相流向
备注
1.双向绑定一般都应用在表单类元素上如input、select等
2.v-model:value 可以简写为v-model因为v-model默认手机的就是value值
2.1 单向数据绑定
我们之前在指令语法中见到了
!DOCTYPE html
htmlheadmeta charsetUTF-8title 初识vue/title!--引入vue 引入之后全局就多了一个vue这个构造函数--script typetext/javascript src../js/vue.js/script /headbodydiv idroot单行数据绑定 input typetext :valuename/divscript typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalse new Vue({el:#root,data:{name:尚硅谷123}})/script /body
/htm展示单向数据绑定 当我们在Vue中修改name的值的时候页面的值也会随着修改如下图 但是我们在文本框中修改内容的时候Vue中的name值不会改变 原因 单向绑定的关系 2.2 双向数据绑定 div idroot单行数据绑定 input typetext :valuenamebr双向数据绑定 input typetext v-model:valuename/div结果如下图 当我们修改Vue中name时我们发现两个文本框都会改变 当我们修改双向绑定文本框的时候我们发现Vue的name值也会改变 单向文本框也会改变的原因是因为Vue的name值改变了 产生了一个类似下图的连锁反应 三、el与data的两种写法
以后会在学组件的时候使用到el与data
3.1 el
第一种 script typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalseconst v new Vue({el:#root, //el第一种写法data:{name:张靖奇}})/script mount挂载更灵活 script typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalseconst v new Vue({data:{name:张靖奇}})v.$mount(#root) //el第二种写法 mount是挂载的意思/script 在Vue实例中有几个很特别的属性带着$符这些都是给我们用的
不带$符的都不是给程序员用的Vue底层自己在用
我们使用$mount替换el 为什么说这种方式更灵活呢
比如下段代码我们设置了一个定时器在1秒之后才将Vue实例和root容器关联 为什么是mount
我们要把我们的模板root交给Vue实例进行解析解析完之后将内容放到挂载到页面上指定位置展示
3.2 data
对象式 script typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalseconst v new Vue({el:#root, //data的第一种写法对象式data:{name:张靖奇}})/script 函数式 推荐 函数式必须要返回一个对象对象中的数据就是我们所需要的 script typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalseconst v new Vue({el:#root, //data的第二种写法函数式data:function(){return{name:张靖奇}}})/script 而且我们的data函数是Vue帮我们调用的我们可以验证一下
下图中的this是Vue实例对象 前提是把下图中的data写成普通函数如果写成箭头函数便不可以因为箭头函数中没有this就会往外找找到全局的window
由Vue管理的函数一定不要写成箭头函数一旦写了箭头函数this就不再是Vue实例了 data:function(){console.log(,this)return{name:尚硅谷}}我们一般都下面这样写,比较方便 data(){return{}}四、数据代理
数据代理通过一个对象代理对另一个对象中属性的操作读/写
4.1 Object.defineProperty
给一个对象添加或定义属性使用
比如下面有一个person对象然后我们想增加一个“age”属性怎么办 let person {name: 张三,sex: 男,}如下所示
script typetext/javascriptlet number 18let person {name: 张三,sex: 男,}//参数一给哪个对象添加参数//参数二添加的参数叫什么名//参数三配置项可以写很多的配置bject.defineProperty(person, age, {value: 18,//这样就代表着age属性的值是18// 但是我们这样添加的元素无法进行枚举或者遍历// 为了我们新添加的age元素可以添加遍历我们还需要一个配置enumerable: true,//除此之外我们新添加的age属性在页面上无法修改为了在页面上也可以修改我们需要再进行配置// writable:trueconfigurable: true, //控制属性可以被删除})
/script假如我想把自定义的变量number赋值给person的新属性age怎么做 script typetext/javascriptlet number 18let person {name:张三,sex:男,}Object.defineProperty(person,age,{enumerable:true,// writable:true,configurable:true , //当有人读取person的age属性时get函数或者说getter就会被调用且返回值就是age的值get:function(){console.log(有人读取了age属性)return number},// 当有人修改person的age属性时set函数或者说setter就会被调用且会受到具体的值set(value){console.log(有人修改了age属性时且值是,value)numbervalue}})/script
4.2 Vue数据代理
4.2.1 展示数据代理
!DOCTYPE html
htmlheadmeta charsetUTF-8title 初识vue/title!--引入vue 引入之后全局就多了一个vue这个构造函数--script typetext/javascript src../js/vue.js/script /headbodydiv idroot/divscript typetext/javascriptlet obj { x:100 } let obj2{ y:200 }Object.defineProperty(obj2,x,{//当有人想获取obj2中的x属性时我们把obj的x属性给他get(){return obj.x},// setter被调用时说明有人想修改obj2的x// 当有人想修改obj2中x属性时我们把obj中的x属性值给改掉就可以了set(value){obj.xvalue}})/script /body
/html
效果如下图所示 4.2.2 Vue数据代理
Vue中数据代理
通过vm对象来代理data对象中属性的操作读或写
Vue中数据代理的好处
更加方便的操作data中的数据。
我们在data中定义的数据在Vue实例中是_data的形式存在即vm._datadata
基本原理
通过Object.defineProperty把data对象中所有属性添加到vm上
为每个添加到vm上的属性都指定一个getter和setter
在getter/setter内部去操作读或写data中对应的属性
数据代理图示 下图中右下角黄色和紫色的先就代表着数据代理 假设我们没有数据代理我们在使用插值语句的时候使用了**_data.xxxx**这样就增加了代码量也非常的不方便故我们使用了上面的数据代理
!DOCTYPE html
htmlheadmeta charsetUTF-8title 初识vue/title!--引入vue 引入之后全局就多了一个vue这个构造函数--script typetext/javascript src../js/vue.js/script /headbodydiv idrooth1 {{_data.name}}/h1h1 {{_data.address}}/h1/divscript typetext/javascript//阻止vue在启动时生成生产提示Vue.config.productionTipfalse new Vue({el:#root,data:{name:尚硅谷,address:洪福科技园}})/script /body
/html
