长沙专业网站制作设计,网站建设中的技术问题,网站建设策划书范本,python做的网站多吗文章目录1.什么是指令#xff1f;2.插值表达式2.1.花括号2.2.插值闪烁2.3.v-text和v-html3.v-model4.v-on4.1.基本用法4.2.事件修饰5.v-for5.1.遍历数组5.2.数组角标5.3.遍历对象6.key7.v-if和v-show7.1.基本使用7.2.与v-for结合7.3.v-else7.4.v-show8.v-bind8.1. 属性上使用v… 文章目录1.什么是指令2.插值表达式2.1.花括号2.2.插值闪烁2.3.v-text和v-html3.v-model4.v-on4.1.基本用法4.2.事件修饰5.v-for5.1.遍历数组5.2.数组角标5.3.遍历对象6.key7.v-if和v-show7.1.基本使用7.2.与v-for结合7.3.v-else7.4.v-show8.v-bind8.1. 属性上使用vue数据8.2. class属性的特殊用法9.计算属性10.watch10.1.监控10.2. 深度监控1.什么是指令
指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model代表双向绑定。
2.插值表达式
2.1.花括号
格式
{{表达式}}说明
该表达式支持JS语法可以调用js内置函数必须有返回值表达式必须有返回结果。例如 1 1没有结果的表达式不允许使用如var a 1 1;可以直接获取Vue实例中定义的数据或函数
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idapp{{msg}}
/div
scriptlet app new Vue({el:#app,data:{msg:hello vue}});
/script
/body
/html2.2.插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时页面会显示出原始的 {{}} 加载完毕后才显示正确数据称为插值闪烁。类似如下的效果最新vue是几乎没有此问题 2.3.v-text和v-html
使用v-text和v-html指令来替代 {{}}
说明
v-text将数据输出到元素内部如果输出的数据有HTML代码会作为普通文本输出v-html将数据输出到元素内部如果输出的数据有HTML代码会被渲染
示例
改造原页面内容为:
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idappv-text:span v-textmsg/spanbrv-html:span v-htmlmsg/spanbr
/div
scriptlet app new Vue({el:#app,data:{msg:h2hello, vue./h2}});
/script
/body
/html效果 并且不会出现插值闪烁当没有数据时会显示空白。
3.v-model
刚才的v-text和v-html可以看做是单向绑定数据影响了视图渲染但是反过来就不行。接下来学习的v-model是双向绑定视图View和模型Model之间会互相影响。
既然是双向绑定一定是在视图中可以修改数据这样就限定了视图的元素类型。目前v-model的可使用元素有
inputselecttextareacheckboxradiocomponentsVue中的自定义组件
基本上除了最后一项其它都是表单的输入项。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idappinput typecheckbox valueJava v-modellanguageJavabrinput typecheckbox valuePHP v-modellanguagePHPbrinput typecheckbox valueSwift v-modellanguageSwiftbrh2你选择了{{language.join(,)}}/h2
/div
scriptlet app new Vue({el:#app,data:{language:[]}});
/script
/body
/html多个 checkbox 对应一个model时model的类型是一个数组单个checkbox值是boolean类型radio对应的值是input的value值input 和 textarea 默认对应的model是字符串select 单选对应字符串多选对应也是数组
效果
4.v-on
4.1.基本用法
v-on指令用于给页面元素绑定事件。
语法
v-on:事件名js片段或函数名简写语法
事件名js片段或函数名例如 v-on:clickadd 可以简写为 clickadd
示例:
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idapp!--直接写js片段--button clicknum增加/button!--使用函数名该函数必须要在vue实例中定义--button clickdecrement减少/buttonh2num {{num}}/h2
/div
scriptlet app new Vue({el:#app,data:{num:1},methods:{decrement(){this.num--;}}});
/script
/body
/html效果
4.2.事件修饰
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点但更好的方式是方法只有纯粹的数据逻辑而不是去处理 DOM 事件细节。
为了解决这个问题Vue.js 为 v-on 提供了事件修饰符。之前提过修饰符是由点开头的指令后缀来表示的。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idapp!--直接写js片段--button clicknum增加/button!--使用函数名该函数必须要在vue实例中定义--button clickdecrement减少/buttonh2num {{num}}/h2hr事件冒泡测试brdiv stylebackground-color: lightblue;width: 100px;height: 100px clickprint(你点击了div)button click.stopprint(点击了button)点我试试/button/divbr阻止默认事件bra hrefhttp://www.xxxxxxx.cn click.preventprint(点击超链接)vue/a
/div
scriptlet app new Vue({el: #app,data: {num: 1},methods: {decrement() {this.num--;},print(msg) {console.log(msg)}}});
/script
/body
/html事件修饰符语法v-on:xxxx.修饰符常用的修饰符有
.stop 阻止事件冒泡 .prevent 阻止默认事件发生 .capture 使用事件捕获模式 .self 只有元素自身触发事件才执行。冒泡或捕获的都不执行 .once 只执行一次
5.v-for
遍历数据渲染页面是非常常用的需求Vue中通过v-for指令来实现。
5.1.遍历数组
语法
v-foritem in itemsitems要遍历的数组需要在vue的data中定义好。item循环变量
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappulli v-foruser in users{{user.name}}--{{user.age}}--{{user.gender}}/li/ul
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {users: [{name: bruce, age: 8, gender: 男},{name: tom, age: 12, gender: 女},{name: jack, age: 4, gender: 男}]}});
/script
/body
/html效果
5.2.数组角标
在遍历的过程中如果需要知道数组角标可以指定第二个参数
语法
v-for(item,index) in itemsitems要迭代的数组item迭代得到的数组元素别名index迭代到的当前元素索引从0开始。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappulli v-for(user, index) in users{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}/li/ul
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {users: [{name: bruce, age: 8, gender: 男},{name: tom, age: 12, gender: 女},{name: jack, age: 4, gender: 男}]}});
/script
/body
/html效果
5.3.遍历对象
v-for除了可以迭代数组也可以迭代对象。语法基本类似
语法
v-forvalue in object
v-for(value,key) in object
v-for(value,key,index) in object1个参数时得到的是对象的值2个参数时第一个是值第二个是键3个参数时第三个是索引从0开始
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappulli v-for(user, index) in users :keyindex{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}/li/ulhrulli v-for(value,key,index) in person{{index}}--{{key}}--{{value}}/li/ul
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {users: [{name: java, age: 8, gender: 男},{name: php, age: 12, gender: 女},{name: java, age: 4, gender: 男}],person: {name: C#, age: 3, address: 中国}}});
/script
/body
/html效果
6.key
我们都知道,vue很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就会渲染新的数据呈现在页面上
对于v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作
假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事吗,而key的出现就是尽可能的回避了这个问题,提高效率,如果我们给列表增加一条数据,页面只渲染了这个数据,那不就很完美了
v-for默认使用就地复用策略,列表数据修改的时候,他会根据可以值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素 当我们这样绑定时我们在对最后面的数据进行操作时不会有什么问题一旦我们对中间进行操作就会产生不好的作用 可以看到除了第一个数据可以复用之前的之外后面的所有数据都需要重新渲染。 最好的办法是使用数组中不会变化的那一项作为 key 值对应到项目中即每条数据都有一个唯一的 id 来标识这条数据的唯一性。
示例
ulli v-for(item,index) in items :keyindex/li
/ul这- 里使用了一个特殊语法 :key 后面会讲到它可以让你读取vue中的属性并赋值给key属性
这里绑定的key是数组的索引应该是唯一的
总结: key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 Vue 优化渲染。这些 key 必须是唯一的数字或字符串Vue 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。
7.v-if和v-show
7.1.基本使用
v-if顾名思义条件判断。当得到结果为true时所在的元素才会被渲染
语法
v-if布尔表达式示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappbutton clickshow !show点我/buttonh2 v-ifshowHello VueJS./h2
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el:#app,//el即element要渲染的页面元素data: {show:true}});
/script
/body
/html效果
7.2.与v-for结合
当v-if和v-for出现在一起时v-for优先级更高。也就是说会先遍历再判断条件。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappbutton clickshow !show点我/buttonh2 v-ifshowHello VueJS./h2hrulli v-for(user,index) in users v-ifuser.gender女{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}/li/ul
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {show: true,users: [{name: Java, age: 8, gender: 男},{name: C#, age: 12, gender: 女},{name: Php, age: 4, gender: 男},{name: C, age: 2, gender: 女}]}});
/script
/body
/html效果
7.3.v-else
可以使用 v-else 指令来表示 v-if 的“else 块”
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappbutton clickshow !show点我/buttonh2 v-ifshowHello VueJS./h2hrul v-ifshowli v-for(user,index) in users v-ifuser.gender女 stylebackground-color: red{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}/lili v-else stylebackground-color:blue{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}/li/ul
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {show: true,users: [{name: Java, age: 8, gender: 男},{name: C#, age: 12, gender: 女},{name: Php, age: 4, gender: 男},{name: C, age: 2, gender: 女}]}});
/script
/body
/htmlv-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面否则它将不会被识别。 v-else-if 顾名思义充当 v-if 的“else-if 块”可以连续使用
div v-iftype A
A
/div
div v-else-iftype B
B
/div
div v-else-iftype C
C
/div
div v-else
Not A/B/C
/div类似于 v-else v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
7.4.v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样
h1 v-showokHello!/h1不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display 。
示例
8.v-bind
8.1. 属性上使用vue数据
看这样一个案例
!DOCTYPE html
html langen xmlns:v-bindhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titlevuejs测试/titlestyle typetext/cssdiv {width: 100px;height: 100px;color: hotpink;}.red {background-color: red;}.blue {background-color: blue;}/style
/head
body
div idappbutton clickcolorred红色/buttonbutton clickcolorblue蓝色/buttondiv class点击按钮改变背景颜色。/div
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,data: {color: red}});
/script
/body
/html解读
页面有两个按钮点击时会改变Vue实例中的color值这个值与前面定义的CSS样式一致。目前div的class为空希望实现点击按钮后div的class样式会在.red和.blue之间切换
该如何实现
大家可能会这么想既然color值会动态变化为不同的class名称那么我们直接把color注入到class属性就好了于是就这样写
div class{{color}}/div这样写是错误的因为插值表达式不能用在标签的属性中。此时Vue提供了一个新的指令来解决v-bind语法
v-bind:属性名Vue中的变量例如在这里我们可以写成
div v-bind:classcolor/div不过v-bind太麻烦因此可以省略直接写成 :属性名属性值 即
div :classcolor/div8.2. class属性的特殊用法
上面虽然实现了颜色切换但是语法却比较啰嗦。Vue对class属性进行了特殊处理可以接收数组或对象格式 对象语法 可以传给 :class 一个对象以动态地切换 class
div :class{ red: true,blue:false }/div对象中key是已经定义的class样式的名称如本例中的 red 和 blue对象中value是一个布尔值如果为true则这个样式会生效如果为false则不生效。
之前的案例可以改写成这样
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlestyle typetext/cssdiv {width: 100px;height: 100px;color: white;}.red {background-color: red;}.blue {background-color: blue;}/style
/head
body
div idappbutton clickcolorred红色/buttonbutton clickcolorblue蓝色/buttondiv :classcolor点击按钮改变背景颜色。/divhrbrbutton clickbool!bool点我改变下面色块颜色/buttondiv :class{red:bool,blue:!bool}点击按钮改变背景颜色。/div
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,data: {color: red,bool: true}});
/script
/body
/html首先class绑定的是一个对象 {red:bool, blue: !bool} red和blue两个样式的值分别是bool和!bool也就是说这两个样式的生效标记恰好相反一个生效另一 个失效。bool默认为true也就是说默认red生效blue不生效 现在只需要一个按钮即可点击时对bool取反自然实现了样式的切换
效果
9.计算属性
在插值表达式中使用js表达式是非常方便的而且也经常被用到。
但是如果表达式的内容很长就会显得不够优雅而且后期维护起来也不方便例如下面的场景有一个日期的数据但是是毫秒值
data:{birthday:1429032123201 // 毫秒值
}在页面渲染希望得到yyyy-MM-dd的样式则需要如下处理
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idapph2你的生日为{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()1}}-{{new Date(birthday).getDay()}}/h2
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {birthday: 1429032123201}});
/script
/body
/html虽然能得到结果但是非常麻烦。 Vue中提供了计算属性来替代复杂的表达式
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idapph2你的生日为{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()1}}-{{new Date(birthday).getDay()}}/h2hrh2computed计算方式你的生日为{{birth}}/h2
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {birthday: 1429032123201},computed: {birth() {const date new Date(this.birthday);return date.getFullYear() - (date.getMonth() 1) - date.getDay();}}});
/script
/body
/html计算属性本质就是方法但是一定要返回数据。然后页面渲染时可以把这个方法当成一个变量来使用。
效果
10.watch
10.1.监控
watch可以让我们监控一个值的变化。从而做出相应的反应。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idappinput v-modelmessage
/div
script typetext/javascriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {message: hello vue},watch: {message(newValue, oldValue) {console.log(新值 newValue 旧值 oldValue);}}});
/script
/body
/html效果
10.2. 深度监控
如果监控的是一个对象需要进行深度监控才能监控到对象中属性的变化例如
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappinput v-modelmessage/hrbrinput v-modelperson.namebrinput v-modelperson.agebutton clickperson.age/buttonh2姓名为{{person.name}}年龄为{{person.age}}/h2
/divscript srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el: #app,//el即element要渲染的页面元素data: {message: hello vue,person: {name: vue123, age: 12}},watch: {message(newValue, oldValue) {console.log(新值 newValue 旧值 oldValue);},person: {//开启深度监控可以监控到对象属性值的变化deep: true,//监控的处理方法handler(obj) {console.log(name obj.name , age obj.age);}}}});
/script/body
/html变化
以前定义监控时person是一个函数现在改成了对象并且要指定两个属性 deep:代表深度监控不仅监控person变化也监控person中属性变化handler就是以前的监控处理函数
效果
