长春seo公司长春网站设计,网站建设鞍山,机关门户网站app建设思考,装修设计公司官网文章目录 一、绑定样式绑定class样式绑定style样式总结 二、渲染条件渲染列表渲染语法key详解 三、Vue检测数据原理问题解决 四、收集表单数据五、过滤器定义语法: 六、内置指令回顾v-text指令:v-htmlcookie问题 v-clock指令v-oncev-pre 一、绑定样式
绑定class样式
!-- … 文章目录 一、绑定样式绑定class样式绑定style样式总结 二、渲染条件渲染列表渲染语法key详解 三、Vue检测数据原理问题解决 四、收集表单数据五、过滤器定义语法: 六、内置指令回顾v-text指令:v-htmlcookie问题 v-clock指令v-oncev-pre 一、绑定样式
绑定class样式
!-- 绑定class样式--字符串写法适用于:样式的类名不确定需要动态指定--
div classbasic :classmood clickchangeMood{ {name}}/div!-- 绑定class样式--数组写法适用于:要绑定的样式个数不确定、名字也不确定--
div classbasic :classclassArr { {name}}/div
等价于如下注意数组内加引号不然会当成Vue的变量处理
div classbasic :class[已有样式1,已有样式2,已有样式3]{ {name}}/div!-- 绑定class样式--对象写法适用于:要绑定的样式个数确定、名字也确定但要动态决定用不用--
div class basic :classclass0bj{{name}}/div
const x new Vue({el:‘#root’ data:{name:CSDN,mood:‘css中已有的样式’,classArr:[已有样式1,已有样式2,已有样式3],\//为true表示可以引用classObj:{样式1:false,样式2:false,样式3:true}}
})绑定style样式
//对象写法
div classbasic :style styleObj{ {name}}/div//可指定多个
div classbasic :style”[sty1eObj1, sty1eObj2]{ {name}}/div//数组写法
div class basic :style styleArr {{name}}/div
const x new Vue({el:‘#root’ data:{name:CSDN,styleObj:{//font-size必须改成驼峰命名fontSize:40px}styleArr:[styleObj1:{},styleObj2:{}]}
})总结
class样式 写法:class“xxx” xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定要动态获取。 对象写法适用于:要绑定多个样式个数不确定名字也不确定。 数组写法适用于:要绑定多个样式个数确定名字也确定但不确定用不用。style样式 :style“{fontSize: xxx}” 其中xxx是动态值。 :style[a,b]其中a、b是样式对象。
二、渲染
条件渲染
v-if 写法: (1).v-if“表达式” (2).v-else-if表达式” (3).v-else表达式” 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除不是被隐藏。 注意: v-if可以和:v-else-if、 v-else 起使用 但要求结构不能被“打断”。
div v-ifn 1 Angular/ div
div v-else-ifn 2React/div
div v-else-ifn 3 Vue , div
div v-else哈哈/divV-show 写法: v-show 表达式 表达式必须是布尔值为false表示隐藏 适用于:切换频率较高的场景。 特点:不展示的DOM元素未被移除仅仅是使用样式隐藏掉备注:使用v-if的时元素可能无法获取到而使用v- show 定可以获取到。当很多容器都需要一个判断条件时可以用一个盒子封装但是用现有盒子封装都会破坏结构因此需要用到特殊的
template v-ifn 1h2你好/h2h2CSDN /h2 h2北京 /h2
/templatetemple不会在页面中渲染不会影响结构。这个只能搭配v-if
列表渲染
语法
v-for指令:
用于展示列表数据语法:
v-for(item, index) in xxx :keyyyy
//index为索引值
//key让每个容器都有唯一的标识尽量要写。可以为索引值也可以在对象中自己定义
可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
1、遍历数组
div idrooth2人员列表 /h2ul li v-for(p, index) in persons :key index{{p.name}}-{{p.age}}/1i /ul
/div2、遍历对象
div idrooth2汽车 /h2ul li v-for(p, index) in car :key index{{index}}-{{p}} //此时p是car中每个属性的值/1i /ul
/div3、遍历字符串
div idrooth2汽车 /h2ul li v-for(p, index) in str :key index{{index}}-{{p}} //此时p是字符串中每个字符/1i /ul
/div4、遍历指定次数
div idrooth2汽车 /h2ul li v-for(p, index) in 10 :key index{{index}}-{{p}} //此时p是从1开始增大的次数/1i /ul
/divconst x new Vue({el:‘#root’ data:{persons:[{id: 001 ,name:张三,age:18},{id: 002 ,name:李四 ,age:19},{id: 003 ,name:王五 ,age :20}]car :{name:奥迪A8price;70万color:黑色},str:hello}
})key详解
如果不写keyindex会自动把索引值变成key 总结key的作用
虚拟DOM中key的作用: kev是虚拟DOM对象的标识当状态中的数据发生变化时Vue会根据【新数据】生成【新的虚拟DOM】 , 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较比较规则如下:对比规则: (1).旧虚拟DOM中找到了与新虚拟DOM相同的key: ①.若虚拟DOM中内容没变 直接使用之前的真实DOM ! ②.若虚拟DOM中内容变了则生成新的真实DOM随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM随后渲染到到页面。用index作 为key可能会引发的问题: 1.若对数据进行:逆序添加、逆序删除等破坏顺序操作: 会产生没 有必要的真实DOM更新 界面效果没问题但效率低。 2.如果结构中还包含输入类的DOM:会产生错误DOM更新 界面有问题。开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯-值。 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示 使用index作为key是没有问题的。
三、Vue检测数据原理
问题
如下此时调用updateMei()方法this.person里面的值确实改变了但是Vue检测不到因此不会在页面中体现出来。还有data中没有的属性若是直接vm.data.想要新增属性值也是无法渲染的。 本质上Vue是通过get和data检测数据直接赋值是不行的没有对象set葛get方法
const x new Vue({el:‘#root’ data:{persons:[{id: 001 ,name:张三,age:18},{id: 002 ,name:李四 ,age:19},{id: 003 ,name:王五 ,age :20}]},method:{updateMei(){this.person[0]{id: 006 ,name:赵六,age:38},}}
})解决
vue会监视data中所有层次的数据。对象里面的对象和属性也会监视 但是数组内部的值比如arr[‘值1’,‘值2’.‘值3’] 这些值只是单纯的值没有get和set不会被单独检测如何监测对象中的数据? 通过setter实现监视且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性Vue默认不做响应式处理 (2).如需给后添加的属性做响应式请使用如下API:
Vue. set (target, propertyName/ index, value) 或
Vm.\$set(target, propertyName/ index, value )如何监测数组中的数据? 通过包裹数组更新元素的方法实现本质就是做了两件事: (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板进而更新页面。在Vue修改数组中的某个元素一定要用如下方法:(在Vue中这些方法和普通数组的这些方法不一样进行了一些修改增加重新解析渲染的环节) 1.使用这些变更方法API:push()、pop()、 shift()、 unshift()、 splice()、 sort()、 reverse() 变更方法顾名思义会变更调用了这些方法的原始数组。相比之下也有非变更方法例如 filter()concat() 和slice() 。它们不会变更原始数组而总是返回一个新数组。当使用 非变更方法时可以用新数组替换旧数组: 2.Vue.set()或vm.$set( ) 特别注意: Vue.set() 和vm.$set() 不能给vm或vm的根数据对象比如vm._data添加属性! ! !
四、收集表单数据
若: input type“text”/, 则v-model收 集的是value值用户输入的就是value值。若: input type“radio”/, 则v -model收集的是value值且要给标签配置value值。 若: input type checkbox/ 1.没有配置input的value属性那么收集的就是checked (勾选or未勾选是布尔值) 2.配置input的value属性: (1)v-mode1的初始值是非数组那么收集的就是checked(勾选or未勾选是布尔值) (2)v - mode1的初始值是数组那么收集的的就是value组成的数组 备注: v-model的 三个修饰符: lazy:失去焦点再收集数据 number:输入字符串转为有效的数字 trim:输入首尾空格过滤
五、过滤器
定义
对要显示的数据进行特定格式化后再显示(适用于些简单逻辑的处理)。
语法:
注册过滤器:
1、全局过滤器Vue.filter( name ,callback)
2、局部过滤器new Vue{filters:{name(){},name:function(){}}} 使用过滤器: {{ xxx| 过滤器名}} 或v-bind:属性 xxx| 过滤器名” 备注: 1、过滤器也可以接收额外参数:过滤器名参数 接收的时候第一个参数还是|前面的xxx第二个开始才是参数 2、多个过滤器也可以串联xxx| 过滤器名1|过滤器名2 3、并没有改变原本的数据是产生新的对应的数据
六、内置指令
回顾
我们学过的指令:
v-bind单向绑定解析表达式可简写为:xXx
v-model双向数据绑定
v-for遍历数组/对象/字符串
v-on:绑定事件监听可简写为
v-if:条件渲染(动态控制节点是否存存在)
v-else:条件渲染(动态控制节点是否存存在)
v- show:条件渲染(动态控制节点是否展示)v-text指令:
1.作用:向其所在的节点中渲染文本内容。 2.与插值语法的区别: v-text会 替换掉节点中的内容{{xx}}则不会。 3.标签不会渲染直接输出
v-html
与v-text不同的地方就是输入的文本若有标签则会渲染。这样会导致安全问题容易导致xxs攻击。所有渲染标签到页面的指令都会有安全问题
cookie 第一次访若成功所需要访问的服务器就会放回一些key:vaule值这些值就是cookie它是你账户的唯一标识下次访问时就不需要再次根据你用户密码进行连接只要将cookie传给它就可以识别你的账户。cookie服务器可以一次全部返还给你也可以在n次访问中慢慢给你。
你知道访问了这个服务器登录账号cookie就会在你的浏览器中本地存在几天以后再次浏览就可以直接登录几天免登录但是其他浏览器没有cookie就无法免登录。当然如果你将所登录浏览器的cookie传给另外的浏览器那自然也可以登录。
只要有了cookie你的账户就可以访问cookie可以通过F12中application中的Cookies看到。 其中有个属性叫做HttpOnly表示只有通过httpOnly才能访问cookie比较安全
问题
如果通过v-html中输入一些诱惑性文字就可以拿到你的cookie从而登录你的账号导致安全问题。
div v-htmlstr/div
其中在vue中str:a hrefjavascript:location.href破坏网站的网址?document.cookie点此跳转/a通过上述操作他就可以在他的网站上通过网址的方式拿到你的cookie从而登录你的账号。当然通过此方法只能获取httpOnly为false的cookie不过还是不安全。
v-clock指令
本质是一一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性。 用来解决访问外部js时加载过慢导致出现渲染不全的问题因此在js加载完毕Vue实例创建完毕后就消失。使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
//css中
[v-cloak]{display:none;
}
div v-cloak v-htmlstr/div上述代码在没加载完毕时v-cloak存在此时渲染不全的页面不会显示当加载完毕后v-cloak消失此时渲染完全页面再显示
v-once
v-once所在节点在初次动态渲染后就视为静态内容了。以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。 适用于展示一些初始化的数据但是后面数据改变的情况
v-pre
跳过其所在节点的编译过程可利用其跳过没有使用指令语法没有使用插值语法的节点此时节点不需要编译js代码会加快编译提高性能
