vue学习

01：MVC和MVVM的关系图解

02：

03:vue实例中data使用return包裹和不使用return包裹的区别
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：

let app= newVue({

el:"#app",
data:{
msg:’’
},
methods:{

}
})

在使用组件化的项目中使用的是如下形式：

export default{
data(){
return {
showLogin:true,
// def_act: ‘/A_VUE’,
msg: ‘hello vue’,
user:’’,
homeContent: false,
}
},
methods:{

}
}

为何在大型项目中data需要使用return返回数据呢？
答：不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

04:v-cloak和v-text和v-html的区别和使用

视频地址（十分钟左右）：https://www.bilibili.com/video/av27969216?p=7

05：### 事件修饰符：

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

代码示例
06：## Vue指令之v-model和双向数据绑定

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定

使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在 表单元素中

代码示例 v-model
07：小项目-建议计算器

简易计算器
08：使用class样式
0.html写法

这是一个很大很大的H1，大到你无法想象！！！

1. 数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用class样式
09：使用class样式

1. 直接在元素上通过 :style 的形式，书写样式对象

这是一个善良的H1

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：
  data: {
  h1StyleObj: { color: ‘red’, ‘font-size’: ‘40px’, ‘font-weight’: ‘200’ }
  }
• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

这是一个善良的H1

3. 在 :style 中通过数组，引用多个 data 上的样式对象

• 在data上定义样式：
  data: {
  h1StyleObj: { color: ‘red’, ‘font-size’: ‘40px’, ‘font-weight’: ‘200’ },
  h1StyleObj2: { fontStyle: ‘italic’ }
  }
• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

这是一个善良的H1

内联样式

09：Vue指令之v-for和key属性

1. 迭代数组

• 索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}

v-for循环普通数组

2. 迭代对象中的属性

{{val}} --- {{key}} --- {{i}}

v-for循环对象数组
v-for循环对象

3. 迭代数字

这是第 {{i}} 个P标签

v-for迭代数字

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

v-for循环key属性的使用

10：## Vue指令之v-if和v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-if和v-show使用