通过vue函数创建一个新的vue实例
一个 Vue 应用由一个通过new Vue创建的 根 Vue 实例 ，以及可嵌套的、可复用的组件树组成的。
我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨
<divid="app"><!-- {{ 插值表达式,可以赋值 取值 三元 }} -->{{ msg }}</div><scriptsrc="./node_modules\vue\dist\vue.js"></script><script>// 引入vue后 会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vm.msg取到对应的内容 ,也可以赋值 }})</script>
2.声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
2.1. 关于{{}} 插值表达式
插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算
插值：
<!-- HTML ---><divid="app">{{ message }}</div><!-- JS ---><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？
如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式.
可以将js中的new Vue复制给一个全局变量vm.此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它
varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})
然后在浏览器的js控制台中修改vm.message值，同时页面也会发生改变
在控制台中输入
vm.messge="你好,Vue"
2.2.使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<divv-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。
示例:
<divid="app"><!-- 数字操作 --><p>{{ number + 2 }}</p><!-- 三目运算 --><p>{{ ok ? 'YES' : 'NO' }}</p><!-- 字符串翻转 --><p>{{ message.split('').reverse().join('') }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>
显示结果:
1.png
但是有个限制就是，每个绑定双大括号(Mustache语法)里面都只能包含 单个表达式
2.3. 关于data数据
vue关注的是数据变化,不需要在像以前一样关注DOM的变化
比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了
varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm.$data.msg="bye world"},2000)
关于实例介绍:
示例中vm是Vue的实例对象,
实例对象上有$data属性,其值就是选项对象中data属性值
选项对象就是在实例化Vue时传入的对象
data属性值是一个对象,因此$data也就是这个对象
当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型
因此示例的结果就是:
2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示
2.4 再次理解MVVM模式
在上一节讲Vue的mvvm模式的时候就有提到,
Vue实例对象就是vm,data数据就是model, 页面显示的结果就是view
再来看一下mvvm的图
mvvm.jpg
这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示
至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说
3.实例上的方法
除了数据属性，Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$，以便与用户定义的属性区分开来。例如：
vardata={a:1}varvm=newVue({el:'#example',data:data})vm.$data===data// =>truevm.$el===document.getElementById('example')// =>true
3.1. 实例上常用的属性和方法
vm.$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm.$data// vm 上的数据vm.$watch// 监听vm.$el// 当前el元素vm.$set// 后加的属性实现响应式vm.$options// vm 配置 上的 所有属性vm.$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm.$refs// 获取dom元素或者组件实例的引用
其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法
constvm=newVue({el:"#app",})
在控制台输入vm
显示结果:
实例属性.png
这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的.
4.实例化多个vue
我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域.
看下如下的示例:
## <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>// Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})// Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){one.title="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>
Vue事件和方法还没有讲到, 先做一个了解即可:
示例分析:
两个实例one和two接管了不同的DOM元素,
点击按钮是在two实例接管的DOM元素中,
所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据
那么问题来了?
能否在two实例中修改one实例中的数据呢,?
答案当然是可以的啦, 因为变量one是全局变量,
在two实例化中,就可以通过one变量得到第一个Vue实例化对象,
然后就可以通过实例化对象修改数据,这个可以自己尝试写写.
5. Vue 操作DOM元素
虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,
操作DOM元素:
在需要操作的DOM元素中使用ref属性,
ref属性的值是自己随便定义的名字
通过Vue实例的$refs属性获取操作dom元素
<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组console.log(this.$refs.wuwei)}})</script>
关于示例中$refs属性的解释:
因为可以在多个DOM元素上使用ref.
所以$refs属性获取的是所有具有ref属性的DOM元素的集.
因此要想操作确定的DOM元素就需要在通过当初的ref值获取.
简而言之: 就是ref在dom元素上通过this.$refs.自定义名字是获取dom元素
当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行操作
注意:
Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined
本小节我们介绍 Vue 中如何进行事件处理。在章节 2.2 中我们已经介绍了指令v-on ，本章节我们将详细介绍在v-on的一些用法。包括如何传递参数、如何使用事件修饰符等。其中，事件修饰符是本章节的难点。事件修饰符很多，同学们不需要一下子都记住，只要学会如何使用它，在开发过程中如果有所遗忘，可以通过翻看文档来使用。
使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 count + 1 的操作。
在上面的例子中，我们把事件处理函数直接写在模板中，然而许多事件处理的逻辑都很复杂，所以直接把JS代码写在 v-on 指令中有时并不可行，v-on 指令可以接收一个定义的方法来调用。示例如下：
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。
有时候我们需要在事件触发的时候传递一些参数，
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定了一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。
有时我们需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在上述 JS 代码第 9-12 行，我们定义了事件函数 setCount。 在按钮点击事件中，我们将 $event 对象传递给函数，因此，在函数 setCount 中可以访问到原生事件对象。
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。
Vue 提供了以下事件修饰符：
接下来，我们用一个完整的示例来看下这些修饰符的使用方法。
实例演示
"运行案例" 可查看在线运行效果
代码解释： 代码第 4-7 行，stop 案例中，当我们给按钮click事件添加.stop修饰符之后，点击按钮，事件不会向上传递。 代码第 10-16 行，submit.prevent 案例中，当给submit事件添加.prevent修饰符之后，提交事件不再重载页面。 代码第 19-21 行，capture 案例中，我们给父容器添加了capture事件，当点击按钮的时候，会先触发capture中的事件函数，然后再触发按钮绑定的点击事件。 代码第 24-26 行，self 案例中，我们给父容器的点击事件添加了.self的修饰符，所以只有点击父容器的时候才会触发该方法，当点击按钮的时候并不会触发父容器绑定的事件。 代码第 29-31 行，once 案例中，我们给按钮的点击事件添加了.once的修饰符，所以只有首次点击按钮的时候会触发事件函数，再次点击之后将不会触发事件函数。
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
注意：在 Mac 系统键盘上，meta 对应 command 键 ( )。在 Windows 系统键盘 meta 对应 Windows 徽标键 ( )。在 Sun 操作系统键盘上，meta 对应实心宝石键 ( )。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：
Vue提供了.exact修饰符，实现单独的系统按键的事件。
例如：
本节，我们带大家学习了事件处理。主要知识点有以下几点：
本章节我们主要介绍 Vue.js 的过渡效果与动画效果。包括如何编写自定义 CSS 动画、如何配合第三方 CSS 动画库、过渡钩子函数的使用、如何使用第三方 JavaScript 动画库。本小节的内容相对之前有些难度，同学们在阅读一遍之后如果不能完全掌握，建议反复阅读，并把本小节的所有案例自己实现一遍，相信通过多次的练习一定可以掌握。
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 1、在 CSS 过渡和动画中自动应用 class； 2、配合使用第三方 CSS 动画库，如 Animate.css； 3、在过渡钩子函数中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 动画库，如 Velocity.js。
使用 transition 组件包裹需要使用过渡效果的 DOM 元素。例如：
接下来让我们先看一个淡入淡出效果的实现代码：
实例演示
运行案例点击 "运行案例" 可查看在线运行效果
代码解释：
那么，transition 组件是如何做到这样的过渡效果的呢？
我想，同学们肯定猜想到当元素切换状态的时候，我们定义的样式会作用于标签元素
。那么，到底是不是这样呢？
打开控制台，检索到
标签上，我们可以清晰地看到：
实际上 Vue 在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v 会替换为 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…
在日常开发中，我们经常会使用 CSS 过渡来实现一些简单的动画效果。接下来我们用一个示例来学习如何使用：
实例演示
"运行案例" 可查看在线运行效果
代码解释：
同样，我们可以使用 CSS 动画来实现元素的过渡效果。CSS 动画用法类似 CSS 过渡，在过渡的不同阶段对应的 Class 会作用于元素。但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 相信同学们在日常业务开发中一定使用过 Dialog，接下来我们就使用 CSS 动画来实现它的过渡效果：
实例演示
"运行案例" 可查看在线运行效果
代码解释：
在之前的两个案例中，我们通过给 transition 设置 name 属性来指定元素在不同阶段的样式类名，但有时候希望使用自定义的过渡类名，我们可以通过给 transition 设置以下属性来达到需求：
自定义过渡的类名优先级高于普通的类名，这样就能很好地与第三方（如：animate.css）的动画库结合使用。
在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定 —— 比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
你也可以定制进入和移出的持续时间：
transition 组件在过渡的不同阶段会触发相应的钩子函数：
这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加v-bind:css="false" ，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
接下来我们来看一个使用钩子函数和 Velocity.js 实现过渡动画的例子：
实例演示
"运行案例" 可查看在线运行效果
代码解释：
有时候我们希望给元素设置初始渲染的过渡效果，可以通过给 transition 设置 appear 的attribute ：
这里默认和进入 / 离开过渡一样，同样也可以自定义 CSS 类名：
同样地，可以使用自定义 JavaScript 钩子：
接下来我们看一个完整的示例：
实例演示
"运行案例" 可查看在线运行效果
代码解释：
本小节我们介绍了如何使用 transition 实现过渡和动画效果，主要包括以下知识点：
