西街二叔

从零开始的vue学习笔记（一）

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。data的数据和视图同步更新。
实例创建后添加一个新的属性，对这个属性的的改动将不会触发任何视图的更新。
如果需要一个属性，但是一开始它为空或不存在，仅需要设置一些初始值。
Object.freeze()方法可以阻止修改现有的属性
除了数据属性，Vue 实例还包含实例属性与方法，前缀为$，例如：vm.$data，vm.$el，vm.$watch()(这里假设vm是某个实例名)，详情可以参考API

实例生命周期钩子
Vue实例有自己的生命周期，提供了一些钩子函数给我们写自己的逻辑代码：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated

ps：不要在选项属性或回调上使用箭头函数，即这些钩子函数不要用箭头函数的写法，因为他们没有this
生命周期图

模板语法

文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
```
Message: {{ msg }}
```
v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
```
这个将不会改变: {{ msg }}
```

原始 HTML
v-html 指令输出真正的html，而不是字符串

Using mustaches: {{ rawHtml }} 输出字符串
Using v-html directive: 
 输出rawHtml变量代表的HTML

使用 JavaScript 表达式
所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
```
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
```
指令
常见有v-if,v-on,v-bind,v-for。
参数：
```
...
```
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
动态参数：
```
 ... 
```
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用
修饰符：
```
...
```
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例子的.prevent就是修饰符
缩写：
```
...

...

...

...
```
计算属性和侦听器

模板一般不要加入过多的逻辑，只是用来渲染会职责分明一些，把逻辑处理防盗计算属性，会更加合理；
```
  Computed reversed message: "{{ reversedMessage }}"
```
```
var vm = new Vue({
  el: '#example',
  data: {
 message: 'Hello'
  },
  computed: {
 // 计算属性的 getter
 reversedMessage: function () {
   // `this` 指向 vm 实例
   return this.message.split('').reverse().join('')
 }
  }
})
```
这里的reversedMessage就是计算属性，可以逆序一个字符串。
定义一个方法，能够达到同样的效果：
```
  Reversed message: "{{ reversedMessage() }}"
```
```
// 在组件中
methods: {
  reversedMessage: function () {
 return this.message.split('').reverse().join('')
  }
}
```
两者区别：计算属性是基于它们的响应式依赖进行缓存的，方法总会再次执行函数；在不同场景下选择不同的方式吧~
tips：使用计算属性，而不是侦听属性（watch里定义的方法）；计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter；自定义的侦听器watch在数据变化时执行异步或开销较大的操作时是最有用的

Class 与 Style 绑定

v-bind 用于 class 和 style，表达式结果的类型除了字符串之外，还可以是对象或数组
先介绍Class绑定

绑定对象
```
data: {
isActive: true,
hasError: false
}
```
当 isActive 或者 hasError 变化时，class 列表将相应地更新,也可以让绑定对象不内联定义在模板里，结果也是一致的：
```
data: {
classObject: {
  active: true,
  'text-danger': false
  }
}
```
绑定计算属性也可以更灵活的展现（不举例子了）

绑定数组


data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

绑定组件（语法和前面完全类似）

Style绑定
v-bind:style 的对象语法

绑定对象


data: {
  activeColor: 'red',
  fontSize: 30
}

或者直接写


data: {
styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

绑定数组
条件渲染
v-if、v-else-if、v-else可以配合使用：

在

从零开始的vue学习笔记（一）

数据与方法

实例生命周期钩子

模板语法

计算属性和侦听器

Class 与 Style 绑定

条件渲染

Title

Hello!

列表渲染

表单输入绑定

你可能感兴趣的:(从零开始的vue学习笔记（一）)