Vue.js学习 第一次学习

一、Vue.js介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
数据驱动，不直接操作DOM（jQuery操作DOM），虚拟DOM

二、安装和使用

1.引入Vue

线上地址

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装（国内推荐使用淘宝镜像）。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
$ npm install vue

2.Vue Devtools安装使用

在使用 Vue 时，推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
安装谷歌访问助手，地址：http://www.ggfwzs.com/ ，按照提示，可在线安装，也可下载下来安装。之后即可打开chrome商店，安装Vue Devtools。
有时安装了也无法启用，显示Vue.js not detected，这时我们先访问（https://www.bilibili.com/ ，B站是用的vue），如果Vue Devtools工具亮了，则说明安装没问题。这时我们需要对插件进行一些设置。在浏览器中找到工具–>管理扩展（不同的浏览器选项可能不一样）

找到工具，将允许访问文件地址勾选上，这样就没问题了，我们可以在调试模式下找到vue工具了。

三、Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
	el: 'app',
	data: {
	newTodoText: '',
	visitCount: 0
	},
	methods: {
	//方法
	},
	watch: {
	//监控
	},
	......
  // 选项
})

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。只有实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

var obj = {
    hello: 'Hello Vue.js!',
  }
Object.freeze(obj)
var vm = new Vue({
  el: '#app',
  data: obj
})

我们可以用vm.hello取到data中的hello数据属性，相当于vm.$data.hello，我们可以用vm.$data来取实例属性，其他的实例例如watch,methods,computed都是这样。

实例生命周期钩子

beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted     el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用
beforeUpdate 数据更新前调用
updated 数据更新后调用
activated keep-alive 组件激活时调用
deactivated keep-alive 组件停用时调用
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
errorCaptured  当捕获一个来自子孙组件的错误时被调用

四、模板语法

1.插值

文本

使用“Mustache”语法 (双大括号) 的文本插值：

Message: {{ msg }}

使用 v-once 指令一次性地插值，当数据改变时，插值处的内容不会更新。该节点上的所有数据都是一次性插值：

这个将不会改变: {{ msg }}

原始 HTML

使用 v-html 指令能使绑定的数据渲染成html样式，而不是字符串

Using v-html directive: 
data.rawHtml = 'This should be red.'

HTML属性

使用 v-bind 指令：

使用 JavaScript 表达式

Vue.js 提供了完全的 JavaScript 表达式支持

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

2.指令

指令 (Directives) 是带有 v- 前缀的特殊特性
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

...
...

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

 ... 

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

...