移动前端框架应用

DAYTOY5

已于 2022-11-05 13:53:32 修改

阅读量775

点赞数

分类专栏：笔记文章标签：前端 1024程序员节

于 2022-10-24 22:13:53 首次发布

本文链接：https://blog.csdn.net/weixin_62673949/article/details/127499320

版权

笔记专栏收录该内容

2 篇文章 17 订阅

订阅专栏

01、体验

体验指令：

v-text，v-html，v-show，v-cloak，v-once，v-pre,v-model，v-on，v-bind，v-if，v-else，v-else-if，v-for

功能：在id="app"的div标签中使用插值表达式显示信息Vue对象传递的数据。

Vue入参选项：Vue的入参是一个对象，本质是一个JSON格式。

本例中传入对象是：

其中：el代表这个Vue对象需要绑定的元素，data表示这个Vue对象与绑定元素交互数据，el和data是固定写法。

入参中options选项：el，template:data，props，computed，methods，watch，directives，filters，components等。

02、vue相关知识

Vue：一种用于构建用户界面的渐进式JavaScript框架。

Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件。

特定：

1、采用组件化模式，提高代码复用率，且让代码更好维护。

2、声明式编码，让编码人员无需直接操作DOM，提高开发效率。

初识vue

1.一个vue实例只能对应一个容器，多个容器的话，只显示最先执行的那个。

2.多个vue实例对应一个实例，只会有第一个vue管理。

总结：一个vue实例只能对应一个容器(一对一，一夫一妻制)

（1）初识Vue:
1.想让Vue工作，就必须创建一个Vue实例,且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。

3.root容器里的代码被称为【Vue模板】。
4.Vue实例和容器是一一对应的。
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。

7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。

注意区分: js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方:
(1)a
(2)a+b

(3). demo(1)
(4). x === y ? 'a': "b"
2.js代码(语句)
(1)if(){0}

(2)for(){}

（2)Vue模板语法有2大类:

1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法:
功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....）。
举例:v-bind:href="xxx”可简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是: v-xxx，此处我们只是拿v-bind举个例子。

（3)el与data的两种写法:
1.el有2种写法
(1)new Vue时候配置el属性。
(2)先创建Vue实例，随后再通过vm.$mount( ' #root')指定el的值。
2.data有2种写法
(1)对象式

(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

03、插值表达式

插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。
插值表达式就是{{ }}，括号里面可以执行简单的js代码。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。
插值表达式支持简单的语法：

4. 为什么插值表达式只支持简单的支持简单的js语法：
（1）防止xss攻击。

（2）xss：Cross Site Scripting，跨域脚本攻击。
（3）危害：盗取cookie，破坏页面结构。
（4）防止csrf攻击。
（5）csrf：Cross-site request forgery，跨站请求伪造。
（6）在用户不知情的情况下，模拟用户的操作，购买商品，发邮件，甚至转账。

04、Vue

1.v-text：能展示对应data中数据内容，也能在数据基础上做运算。

2.v-html:v-html标签渲染容易产生xss攻击。

如何防止xss攻击:

1.前端过滤。

2.后台转义。

3.给cookie 加上属性 http。

05、v-on

v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。

我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需要绑定的事件名称。

v-on总结：

1.v-on指令作用是为元素绑定事件。

2.v-on指令可以简写为@。

3.绑定的方法在methods中。

4.方法内部通过this关键字访问定义在data中的数据。

06、01v-if

v-if使用一般有两个场景：

1.多个元素通过条件判断展示或者隐藏某个元素。或者多个元素。

2.进行两个视图之间的切换。

v-if用于条件判断，判断Dom元素是否显示。

单独使用v-if，变量为布尔值，为true才渲染Dom。
v-show的变量也是布尔值，为true才显示内容，类似css的display。
v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。

07、02v-if

08、v-show

v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

v-show总结：

1.v-show指令的作用是：根据切换元素的显示状态。
2.原理是修改元素的display，实现显示隐藏。
3.指令后面的内容，最终都会解析为布尔值。
4.值为true元素显示，值为false元素隐藏。

08、v-bind

v-bind就是用于绑定数据和元素属性的。

注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class。

另外一种够可以传入一个对象，如下
对象的名active，表示要添加的类名，isActive是vue中的数据，表示在什么情况下添加该类名，对应为真才添加。

09、v-bind

10、v-for

v-for的四种使用方法分别是：
1.使用v-for循环一个简单的数组。
2.使用v-for循环一个复杂的数组。
3.使用v-for循环对象。
4.v-for循环一个迭代的数字。

v-for中key的使用注意项：
1.v-for在循环时，key属性只能使用number获取string。
2.key在使用时只能使用v-bind的属性绑定的形式，指定key的值。
3.在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候。
4.必须在使用v-for的同时指定唯一的字符或者number类型：key值。