Vue 使用教程 （笔记） no1.

准备环境

首先去下载node环境：

安装完成之后在控制台可以看到：

node -v

node安装完成之后自带npm

npm -v

先安装一下nrm 在这里npm是国外镜像 所以下载速度慢 在这里需要 重新下载一个插件 nrm切换 镜像仓库.
-g是全局安装

npm install nrm -g

这里安装时间要等待一下

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

nrm ls

使用淘宝的

好了完成.
这里安装完成之后需要重启一下电脑。

接下来我们使用它

在开发工具idea中创建静态的web工程
然后切换到该目录
首先先初始化工程

npm init -y

安装一下vue

npm install vue --save

安装完成之后刷新工程 整个目录是这样的

编写一个html以{{name}}取值

引入vue
const：const定义变量
el 获取Vue实例关联的DOM元素；
data 获取Vue实例的data选项（对象）

在这里
script一定不能使用简写方式否则会无法引用
必须 如下图不能 />

运行效果：

双向绑定

值的绑定

v-model

运行效果：

事件的绑定：

v-on:click="  "

运行效果：

同样可以定义事件：
methods: 方法
incr 具体应用方法
this可以操作模型 也可以在调用方法

运行效果：

生命周期钩子

钩子函数：

created(){}

这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。

一般可以在created函数中调用ajax获取页面初始化所需的数据。

他会覆盖掉以前赋值的参数：
如下图

可以用beforexx 或者mounted但是这个是发起两次，一般使用created

插值表达式

差值表达式

{{}}

说明：
该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

这个花括号表达式还有一个用户体验的问题 ，就是在网速比较慢的时候它会出现如下：

所以为了提升用户体验加入了以下：

v-text和v-html 使用v-text和v-html指令来替代{{}}

说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
HTML:

v-text: 
v-html:

运行时候：

详细：

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
input
select
textarea
checkbox
radio
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。

v-on

基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名=“js片段或函数名”
另外，事件绑定可以简写，例如v-on:click='add’可以简写为@click=‘add’

事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop ：阻止事件冒泡到父元素
.prevent：阻止默认事件发生*
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

组合按钮
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift

v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
.遍历数组
语法：
v-for=“item in items”
items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

例子：

查看下标：
(index)

遍历对象

遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法：

javascript v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

v-if和v-show

基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：

v-if="布尔表达式"

例子：

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

v-else-if=“xx”
例子：

这里有个坑：
一定不能你在中间加<br>! 一定不能你在中间加<br>!一定不能你在中间加<br>!
结果：

v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

例子：

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
js data:{ birthday:1529032123201 // 毫秒值 }
我们在页面渲染，希望得到yyyy-MM-dd的样式：

虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：
js var vm = new Vue({ el:"#app", data:{ birthday:1429032123201 // 毫秒值 }, computed:{ birth(){// 计算属性本质是一个方法，但是必须返回结果 const d = new Date(this.birthday); return d.getFullYear() + “-” + d.getMonth() + “-” + d.getDay(); } } })
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
页面使用：

<div id="app"> <h1>您的生日是：{{birth}} </h1> </div>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。

watch

watch可以让我们监控一个值的变化。从而做出相应的反应。
给定的方法可以传入两个参数分别代表是：新的值和老的值

//这里可以在开发中作为发送Ajax请求到后台 然后在渲染到前端

组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件

全局组件

我们通过Vue的component方法来定义一个全局组件。

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>

• 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
• 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
• 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
• 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
• data必须是一个函数，不再是一个对象。

组件的复用

定义好的组件，可以任意复用多次：
这就是把组件定义成一个方法的好处。当初始化一个值就创建一个线程 而不是对象

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

js const counter = { template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } };

然后在Vue中使用它：

js var app = new Vue({ el:"#app", components:{ counter:counter // 将定义的对象注册为组件 } })

components就是当前vue对象子组件集合。
其key就是子组件名称
其值就是组件对象名
效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：

页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

.props（父向子传递）

父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件通过props接收父组件数据，通过自定义属性的属性名
父组件使用子组件，并自定义了title属性：

<div id="app">
    <h1>打个招呼：</h1>
    <!--使用子组件，同时传递title属性-->
    <introduce title="大家好，我是锋哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的属性来渲染页面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 通过props来接收一个父组件传递的属性
    })
    var app = new Vue({
        el:"#app"
    })
</script>

效果：

路由

const registerForm={
    template:`
    <div>
    <h1>注册页面</h1>
    用户名：<input type="text">
    密码：<input type="password">
    <input type="button" value="注册">
    </div>
    `

}

首先下载安装：vue-router

>npm install vue-router --save

在index.html中引入依赖：

html <script src="../node_modules/vue-router/dist/vue-router.js"></script>

其中：

表示跳转到某个页面

<router-link to="/register">

选择跳转视图：

<router-view></router-view>