vue2学习第一天

Vue 学习第一天

后端Node中的 MVC 与 前端中的 MVVM 之间的区别

• MVC 是后端的分层开发概念；
• MVVM是前端视图层的概念，主要关注于 视图层分离Model, View , VM ViewModel

插值表达式、v-cloak

{{}}、v-text和v-html
v-cloak方式插值是抖动

v-bind的三种用法

1. 直接使用指令v-bind
2. 使用简化指令:
3. 在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

v-on的缩写和事件修饰符

事件修饰符：

• .stop 阻止冒泡

• .prevent 阻止默认事件

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

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

• .once 事件只触发一次

v-model实现双向数据绑定

vue中样式写法

1. 数组<h1 :class="['red', 'thin']">我是alfred</h1>

2. 数组中使用三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">我是alfred</h1>

3. 数组中嵌套对象<h1 :class="['red', 'thin', {'active': isactive}]">我是alfred</h1>

4. 直接使用对象
   <h1 :class="{red:true, italic:true, active:true, thin:true}">我是alfred我是alfred</h1>

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象
   <h1 :style="{color: 'red', 'font-size': '40px'}">我是alfred</h1>
2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：
  data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } }
• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
  <h1 :style="h1StyleObj">我是alfred</h1>

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

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">我是alfred</h1>

v-for和key属性

1. 迭代数组

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

2. 迭代对象中的属性

	<!-- 循环遍历对象身上的属性 -->
    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3. 迭代数字

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用**“就地复用”**策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

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

v-if和v-show

v-if删除和加载DOM元素中切换
v-show则是样式display的值none与block切换

相关文章

1. js 里面的键盘事件对应的键码
2. Vue.js双向绑定的实现原理