前端开发Vue框架（二）

小鱼儿 2023-09-25 11:52 16阅读 0赞

\{ \{ v1 \}\}

\{ \{ v2 \}\}

同意：

男:

女:

哇塞:

\{ \{ v4 \}\}

\{ \{ info \}\}

是否同意：

\{ \{ isAgree \}\}

性取向：

男

女

哇塞

\{ \{ mysex \}\}

兴趣爱好：

男

女

哇塞

\{ \{ myhobbies \}\}

斗篷指令 v-cloak

渲染闪烁问题。

1.斗篷指令作用：防止页面闪烁

不处理情况下，由于我们的vue导入一般都是在页面的最后面(body后面)，而每次打开该页面时，代码从上往下运行，会先渲染到\{ \{ \}\}，由于还没有被解析，页面会闪烁一下，当vue环境加载成功后，\{ \{ \}\}才会被解析消失

处理后，vue环境没被加载好时，\#app是被隐藏的，当vue环境加载成功后，会依次\#app的v-cloak属性，就不会出现\{ \{ \}\}渲染闪烁问题。

斗篷指令

\{ \{ msg \}\}

条件指令

v-if / v-show

v-if="false",为假时，在页面上不渲染，可以隐藏标签中的信息

v-show="false",为假时，在页面中用display: none渲染(隐藏)，虽然没显示，但是任在页面结构

两种都是可以控制标签的显隐，绑定的值是布尔类型的值，当布尔值是false时，就是隐藏标签，当隐藏标签的时候

v-if 是不渲染标签

v-show以display:none方式渲染

v-if / v-else-if / v-else

v-if='变量'

v-else-if='变量'

v-else

一组分支，上分支成立会屏蔽掉下方所有分支，v-else分支没有条件，当所有的上分支都不成立时才显示v-else分支

条件指令

if指令true

if指令false

shoe指令true

show指令false

if分支

else\_if分支

else分支

条件指令小案例：

条件指令案例

循环指令 v-for

遍历字符串：可以只逐一遍历字符，也可以连同遍历索引

遍历数组：可以只逐一遍历成员元素，也可以连同遍历索引

遍历字典：可以只逐一遍历值(value)，也可以连同遍历成员键(key)，还可以遍历成员key索引

依次遍历value,key,key索引

循环指令

\{ \{ v \}\}

| \{ \{ v \}\}

\{ \{ i \}\}-\{ \{ k \}\}:\{ \{ v \}\}

\{ \{ ch \}\} \#循环字符串

\{ \{ i \}\}\{ \{ ch \}\}

\{ \{ i \}\}\{ \{ ele \}\}

\#循环数组

\{ \{ ele \}\}

\#循环字典

\{ \{ k \}\}:\{ \{ ele \}\}

\{ \{ i \}\}\{ \{ k \}\}:\{ \{ ele \}\}

\#依次取出字典的value,key,key索引

循环案列

留言板案例

留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据

前台数据库：localStorage 和 sessionStorage

localStorage永久保存数据 (这次案例以localStroage保存)

sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)

前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与

点击留言按钮就把输入框中的留言保存在下面，再点击留言就是删除

push是尾增，unshift是首增

\#获取输入框的值userMsg并且传递给data

\{ \{ msg \}\}

\{ \{ v \}\}

分隔符

\{ \{ num \}\}

\{ num \]\}

计算属性成员

1.computed是用来声明 方法属性 的

2. 声明的方法属性不能在 data 中重复定义

3. 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听

4.计算属性的值来源于监听方法的返回值

计算成员属性

把两个输入框的值合并，用\{ \{flName\}\}渲染出来

姓：

名：

姓名：\{ \{ flName \}\}

监听实例 watch

1.watch为data中已存在的属性设置监听方法

2.监听的属性值发生改变，就会触发监听方法

3.监听方法的返回值没有意义

监听一个值，然后拆分两份

属性监听

姓名：

姓：\{ \{ first\_name \}\}

名:\{ \{ last\_name \}\}

组件

// 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用

// 2) 分组分为根组件、全局组件与局部组件

// 根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件

// 全局组件：不用注册，就可以成为任何一个组件的子组件

// 局部组件：必须注册，才可以成为注册该局部组件的子组件

// 3) 每一个组件都有自身的html结构，css样式，js逻辑

// 每一个组件其实都有自己的template，就是用来标识自己html结构的

// template模板中有且只有一个根标签

// 根组件一般不提供template，就由挂载点的真实DOM提供html结构

// 4) 除根组件的其他组件，数据要有局部作用域，保证组件复用时，各组件间数据的独立性

// 5) 在多组件共处时，在哪个组件模板中出现的变量，有当前组件组件提供

组件

\{ \{ msg \}\}

局部组件

父组件的template模板中渲

// 1) 创建局部组件

// 2) 在父组件中注册该局部组件 根组件称为父组件

// 3) 在父组件的template模板中渲染该局部组件

//3.在父组件模板中渲染局部组件

子组件

全局组件

// 1) 创建全局组件

// 2) 在父组件的template模板中直接渲染该全局组件

//2.父组件模板渲染全局组件

前端开发Vue框架（二）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端-VUE框架

相关 vue前端开发项目框架搭建(node+webpack+vue)

相关前端开发Vue框架（二）

相关搭建vue+webpack前端开发框架

相关前端框架开发指南（Vue入门篇）

相关 vue前端UI框架

相关 Web前端-Vue.js必备框架（二）

相关前端框架vue

相关前端框架VUE----补充

相关 Web前端-Vue.js必备框架（二）