去哪儿网站做宣传多少钱,网站seo关键词优化排名,百度开放平台登录,石家庄互联网传销多少律师文本渲染指令
文本渲染指令-v-html与v-text
Vue使用了基于HTML的模板语法#xff0c;允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是
合法的HTML#xff0c;所以能被遵循规范的浏览器和HTML解析器解析。
在前面#xff0c;我们一直使用的是字符串插…文本渲染指令
文本渲染指令-v-html与v-text
Vue使用了基于HTML的模板语法允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是
合法的HTML所以能被遵循规范的浏览器和HTML解析器解析。
在前面我们一直使用的是字符串插值的形式渲染文本但是除此方法之外vue还提供了其他几种常见的文本渲
染方式 v-text更新元素的innerText v-html更新元素的innerHTML div idappp v-htmlmsg/pp v-textmsg/p/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {msg: h1hello/h1}},}).mount(#app);/script
在Vue中我们可以使用{{}}将数据插入到相应的模板中这种方法是一种文本插值。
使用这种方法如果网络慢或者JavaScript出错的话会将{{}}直接渲染到页面中。值得庆幸的是Vue还提供了v-text和v-html来渲染文本或元素。这样就避免了将{{}}直接渲染到页面中。
属性绑定指令
如果想让html标签中的属性也能应用Vue中的数据那么就可以使用vue中常用的属性绑定指令v-bind
v-bind 指令可以简写为: div idappp v-bind:titlemsghello/p!-- v-bind的简写形式 -- p :titlemsghello/p/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {msg: hello world!}},}).mount(#app);/script
上面展示的是v-bind的最基本的使用第一种是完整语法第二种是缩写方式。
除了将元素的title属性和vue实例的相关字段进行绑定外还能将其他的属性字段进行绑定最常见的是对于样式
的绑定即class和style属性。
绑定样式
使用v-bind指令绑定class属性就可以动态绑定元素样式了。 div idappp :classclassNameDOM元素的样式绑定/p/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {className: one }},}).mount(#app);/scriptstyle.one{color: red;}.two{font-size: 48px;}/style
使用对象语法绑定样式
我们可以给v-bind:class 一个对象也可以直接绑定数据里的一个对象以动态地切换class。 div idappp :class{one:isOne,two:isTwo}DOM元素的样式绑定/p/divscript src../js/vue3.js/scriptscriptVue.createApp({el:#app,data(){return {isOne: true,isTwo: true}},}).mount(#app);/scriptstyle.one{color: red;}.two{font-size: 48px;}/style
使用三目运算绑定样式 div idappp :classuserId1?classNameone:classNametwohello world!/p/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {userId:1,classNameone: one,classNametwo: two,}},}).mount(#app);/scriptstyle.one{color: red;}.two{font-size: 48px;}/style
直接绑定内联样式 div idappp :style{color:colorValue,fontSize:fontSizeValue}hello world!/p/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {colorValue: orange,fontSizeValue: 50px}},}).mount(#app);/script 注意绑定style属性后样式的书写要遵循javaScript规范。
同时要使用对象的形式加上{}
也就是将 xxx-xxx 改写成驼峰命名方式 xxxXxxx 事件处理指令
事件绑定
我们可以用 v-on 指令绑定一个事件监听器通过它调用我们 Vue 实例中定义的方法。
v-on指令可以简写为 div idapp!-- pointme就是点击事件的处理函数 -- button v-on:clickpointme点击/button!-- v-on指令的简写 --button clickpointme点击/button!-- 焦点失去事件 --input typetext blurblurEvent/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {}},//methods:此处声明Vue方法 methods:{pointme(){//在控制台输出hello console.log(hello);},blurEvent(){console.log(焦点失去了);}}}).mount(#app);/script
事件处理指令-事件处理的参数
事件处理时还可以传递参数。比如下面的案例对一个数进行加减运算 div idapp{{num}}!-- 第一种写法 --button v-on:clickadd加/buttonbutton clicksubtract减/button!-- 第二种优化写法 ()中的参数代表每次2或-2--button v-on:clickchange(2)加/buttonbutton clickchange(-2)减/button!-- 第三种写法 ()中传多个参数使用,分开--button v-on:clickchange1(2, 10)加/buttonbutton clickchange1(-2, 10)减/button/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {num: 0}},methods:{//第一种写法的事件处理逻辑 add(){this.num;},subtract(){this.num--;},//第二种优化写法的事件处理逻辑 change(value){this.num value;},//第三种写法的事件处理逻辑 change1(value, param){this.num value;}}}).mount(#app);/script
样式切换实例
div idappp :classclassName clickchangehello world!/p
/divscript src../js/vue3.js/script
scriptVue.createApp({data(){return {className: one}},methods:{change(){this.className this.classNameone?two:one;}}}).mount(#app);
/script
style.one{color: red;}.two{color: blue;}
/style
事件对象
我们在学习JavaScript时知道事件处理时会有一个事件对象。事件对象代表事件的状态比如事件在其中发生的
元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
在Vue的事件处理中也可以使用 $event 的形式给事件处理函数传递事件对象。 div idapp{{num}}button v-on:clickchange(3,$event)加/button/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {num: 0}},methods:{change(value,event){this.num value;console.log(event);console.log(event.target);}}}).mount(#app);/script 注意如果只传递事件对象这一个参数时 也可以这样简写 v-on:clickadd 也就是不加小括号时默认 传递一个事件对象参数。 事件修饰符
我们还知道在JavaScript中可以使用 event.preventDefault() 或 event.stopPropagation() 等来阻止事件冒泡或
者阻止浏览器默认行为。那么Vue也提供了这样的功能叫做事件修饰符。
div idappdiv classdiv1 clickdiv1Event contextmenu.preventdiv classdiv2 click.stopdiv2Event/div/div
/divscript src../js/vue3.js/script
scriptVue.createApp({data(){return {num: 0}},methods:{div1Event(){console.log(div1点击事件);},div2Event(){console.log(div2点击事件);}}}).mount(#app);
/script
style.div1{width: 200px;height: 200px;background-color: red;}.div2{width: 100px;height: 100px;background-color: blue;}
/style
条件渲染指令
条件渲染指令可以根据条件判断来设置元素的显示与隐藏。
v-if指令与v-show指令
当v-if的值为false时网页中将不会对此元素进行渲染 div idappdiv v-ifisShow这里使用v-if/divdiv v-shownum1这里使用v-show/div
/divscript src../js/vue3.js/script
scriptVue.createApp({data(){return {isShow:true,num: 2}},}).mount(#app);
/script
v-else指令和v-else-if指令
我们可以使用 v-else 指令来表示 v-if 的“else 块”v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它
将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”可以链式地使用多次。 div idappp v-for(value,key,index) in user{{index}}{{key}}{{value}}/p/divscript src../js/vue3.js/scriptscriptVue.createApp({data(){return {user: {userId:1,userName: 张三,userSex: 男}}},}).mount(#app);/script
v-if指令和v-show指令
div idappdiv v-ifisShow这里使用v-if/divdiv v-shownum1这里使用v-show/div
/divscript src../js/vue3.js/script
scriptVue.createApp({data(){return {isShow:true,num: 2}},}).mount(#app);
/script 通过上面的例子我们不难发现两者的不同 v-if是真正的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if是惰性的只有当条件为true时才会渲染如果条件为false则什么都不做 v-if有很高的切换开销适用于条件不太容易改变的时候 v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换 v-show有很高的初始渲染开销适用于非常频繁地切换
循环遍历指令
vue.js 的循环渲染是依赖于 v-for 指令它能够根据 vue 的实例里面的信息循环遍历所需数据然后渲染出相应
的内容。它可以遍历数组类型以及对象类型的数据js 里面的数组本身实质上也是对象这里遍历数组和对象的时
候方式相似但又稍有不同。
遍历对象属性
value 是遍历得到的属性值key 是遍历得到的属性名index 是遍历次序这里的 key、index 都是可选参数如
果不需要这个指令其实可以写成 v-forvalue in user div idappp v-for(value,key,index) in user{{index}}{{key}}{{value}}/p!-- 简单写法 --p{{user.userId}}/pp{{user.userName}}/pp{{user.userSex}}/p
/divscript src../js/vue3.js/script
scriptVue.createApp({data(){return {user: {userId:1,userName: 张三,userSex: 男}}},}).mount(#app);
/script
遍历数组元素
value 是遍历得到的元素index 是数组下标这里的index 也是可选参数如果不需要这个指令其实可以写成
v-forvalue in userArr div idapp!-- p v-foruser in userArr{{user.userId}},{{user.userName}},{{user.userSex}}/p --ulli v-for(user,index) in userArr :keyuser.userId{{index}},{{user.userId}},{{user.userName}},{{user.userSex}}/li/ul
/divscript src../js/vue3.js/script
scriptVue.createApp({data() {return {user: {userId: 1,userName: 张三,userSex: 男},userArr: [{userId: 1,userName: 张三,userSex: 男},{userId: 2,userName: 李四,userSex: 男},{userId: 3,userName: 王五,userSex: 女}]}},}).mount(#app);
/script
关于循环中的key
上面实例中存在一个问题当更改数组中某一个元素时Vue会对整个数组进行重新渲染。在实际开发中这样的
代码是不被允许的在数据量很多的时候它会严重降低页面的性能。
这时你可以加唯一性key值增加后vue就会辨认出哪些内容被渲染后并没有变化而只渲染新变化的内容。
!-- 这里使用userId这样一个唯一标识来作为key值 --
p v-for(item,index) in userArr :keyitem.userId {{item.userId}},{{item.userName}},{{item.userSex}} button clickoperate(index)操作/button
/p
综合案例 div idapptabletrth编号/thth姓名/thth年龄/thth操作/th/trtr v-for(user,index) in userArr :keyuser.userIdtd{{user.userId}}/tdtd{{user.userName}}/tdtd{{user.userAge}}/tdtdbutton clickdel(index)删除/button/td/trtrtd colspan4button clickclear清空/button/td/tr/tableh3添加/h3姓名input typetext v-modeluserNamebr年龄input typetext v-modeluserAgebrbutton clickadd添加/button
/divscript src../js/vue3.js/script
scriptVue.createApp({data() {return {userArr: [{userId: 1,userName: 张三,userAge: 22}, {userId: 2,userName: 李四,userAge: 23}, {userId: 3,userName: 王五,userAge: 24}],userName: ,userAge: 0}},methods:{add(){let userId 0;if(this.userArr.length 0){userId 1;}else{userId this.userArr[this.userArr.length-1].userId1;}let user {userId: userId,userName: this.userName,userAge: this.userAge}this.userArr.push(user);},del(index){this.userArr.splice(index,1);},clear(){this.userArr.splice(0,this.userArr.length);}}}).mount(#app);
/script
style#app {width: 500px;.}table {width: 100%;border-collapse: collapse;}table tr th,table tr td {height: 35px;border-bottom: solid 1px #999;text-align: center;}
/style
