前端开发Vue框架（二）

表单指令 v-model 设置属性值

1.语法： v-model='控制value值的变量'
2. ：value='变量'（属性指令），直接这样绑定数据不会实时更新数据（修改表单标签值，值不会实时映射给绑定变量）
3. v-model='变量'（表单指令），绑定的数据会实时更新（修改表单标签值，值会实时映射给绑定变量）
4. 单一复选框作为确认框时，v-model绑定的变量值为布尔类型，true代表选上该框，false则相反
5. 多个复选框时，v-model绑定的变量值是一个数据(可以看成列表)，里面存放的数据是复选框中的value属性的对应值（放了谁，谁就会被选中）
6.单选框时, v-model绑定的变量值是单选框中value属性对应的值（里面放了谁，谁就会被选中）

​

​

{{ v1 }}

---

{{ v2 }}

---

​ ​ ​ 同意：

---

​ ​ 男: 女: 哇塞:

{{ v4 }}

---

        <!--单选框-->
        中午吃啥:<br>
        肉:<input type="radio" name="food" value="rou" v-model="v5">
        菜:<input type="radio" name="food" value="cai" v-model="v5">
     </form>
</div>

{{ info }}

---

{{ info }}

---

是否同意：

{{ isAgree }}

​ 性取向： 男 女 哇塞

{{ mysex }}

​ ​ 兴趣爱好： 男 女 哇塞

{{ myhobbies }}

​ ​

---

斗篷指令 v-cloak

渲染闪烁问题。
1.斗篷指令作用：防止页面闪烁
不处理情况下，由于我们的vue导入一般都是在页面的最后面（body后面)，而每次打开该页面时，代码从上往下运行，会先渲染到{{ }}，由于还没有被解析，页面会闪烁一下，当vue环境加载成功后，{{ }}才会被解析消失
处理后，vue环境没被加载好时，#app是被隐藏的，当vue环境加载成功后，会依次#app的v-cloak属性，就不会出现{{ }}渲染闪烁问题。

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ 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

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

   |

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

   |

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

   |
   |

{{ v }}

​

| {{ v }}

​

​

​ ​

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

---

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

​

{{ ch }} #循环字符串

{{ i }}{{ ch }}

{{ i }}{{ ele }}

#循环数组

​ ​

{{ ele }}

#循环字典

​

{{ k }}:{{ ele }}

​

　　

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

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

​

​ 循环案列

留言板案例

1. 留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据
   ​
2. 前台数据库：localStorage 和 sessionStorage
   localStorage永久保存数据 (这次案例以localStroage保存)
   sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
3. 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
   点击留言按钮就把输入框中的留言保存在下面，再点击留言就是删除

push是尾增，unshift是首增

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

• {{ msg }}

留言

• {{ v }}

​ 分隔符

{{ num }}

---

{ num ]}

计算属性成员

1.computed是用来声明 方法属性 的
2. 声明的方法属性不能在 data 中重复定义
3. 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
4.计算属性的值来源于监听方法的返回值

+ = {{ res }} ​

把两个输入框的值合并，用{{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.在父组件模板中渲染局部组件

子组件

    <tag></tag>
</div>

​

全局组件

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

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