Vue是什么？

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

VUE.JS的优点

1.编码简洁，体积小运行效率高，适合移动/PC端开发：压缩后33k
2.更高的运行效率：基于虚拟dom，一种可以预先通过javaScript进行各种计算，把最终dom操作计算出来并优化的技术，由于这个Dom操作预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
3.双向数据绑定：让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上。
4.生态丰富、学习成本低
5.遵循MVVM模式
6.它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目

搭建Vue环境

• 安装Vue可以使用<script>标签引用，也可以使用CDN方法，感兴趣的童鞋可以去查阅。这里着重整理npm的安装方法，因为npm能很好地和Webpack等模块配合使用，在用Vue.js构建大型应用时推荐使用npm安装方法。

Vue运行环境的搭建需要具备的东西：

• node.js环境：npm包管理器
• cnpm：npm的淘宝镜像
• vue-cli：脚手架构建工具

node.js 我们可以在官网下载，然后一路next安装就ok了，必要的话更改安装路径。安装完成后，可以在电脑上打开命令行工具（win+R），输入node -v命令，查看node的版本，如果出现相应的版本号，则说明安装成功了。

note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。

cnpm的安装
在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则表明安装成功。

vue-cli的安装
在命令行输入npm install -g vue-cli，等待安装完成。

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

1.普通页面，引入vue.js: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可实现vue

MVVM
M: data，数据模型，数据对象 model
V: view视图展示，模板页面
VM: viewmode 视图模型（Vue的实例）（页面监听，数据绑定）

VUE扩展插件

1.vue-cli:vue 脚手架
2.vue-resource(axios):ajax请求
3.vue-roter:路由
4.vuex:状态管理
5.vue-lazyload:图片懒加载
6.vue-scroller:页面滑动相关
7.mint-ui:基于vue的UI组件库(移动端)
8.element-ui:基于vue的UI组件库(PC端)

目录解析

VUE内嵌指令

• v-model: 数据绑定
• data: 返回对象用 return
• v-for: 循环 格式 v-for=”字段名 in(of) 数组json”
• v-show: 显示 隐藏 传递的值为布尔值 true false 默认为false
• v-if: 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false
• v-else-if: 必须和v-if连用
• v-else: 必须和v-if连用 不能单独使用 否则报错 模板编译错误
• v-bind: 动态绑定 作用： 及时对页面的数据进行更改
• v-on: 绑定事件 函数必须写在methods里面
• @click: 快捷方法
• v-text: 解析文本
• v-html: 解析html标签
• v-bind:class: 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三目型 ‘isred?”red”:”blue”‘ 3、数组型 ‘[{red:”isred”},{blue:”isblue”}]’
• v-once: 进入页面时 只渲染一次 不再进行渲染
• v-cloak: 防止闪烁
• v-pre: 把标签内部的元素原位输出

用法

v-text

v-text主要用来更新textContent，等同于JS的text属性。
<span v-text="msg"></span>

这两者等价：
<span>{{msg}}</span>

v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
<div v-html="Hello Baby！"></div>
这个div的内容将会替换成属性值Hello Baby！，直接作为HTML进行渲染。

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="app">
    <span v-pre>{{msg}}</span>  //这条语句不进行编译
    <span>{{msg}}</span>
</div>
最终仅显示第二个span的内容

v-cloak

这个指令是防止闪现
<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>
在页面加载时会闪烁，先显示:
<div>
    {{message}}
</div>

然后才会编译为：
<div>
    hello world!
</div>

v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例及其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span>  //单个元素
<div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //组件
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>
上面的例子中，msg,list即使产生改变，也不会重新渲染。

v-if

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
<a v-if="ok">yes</a>
如果属性值ok为true，则显示。否则，不会渲染这个元素。

v-else

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
<a v-if="ok">yes</a>
<a v-else>No</a>

v-else-if

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
<div v-if="type==='A'">
    A
</div>
<div v-if="type==='B'">
    B
</div>
<div v-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

v-show

<h1 v-show="ok">hello world</h1>

也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

v-for

用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式
<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>   //使用of

下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限。
<ul id="app">
    <li v-for="item in items">
        {{parent}}-{{item.text}}
    </li>
</ul>
<script type="text/javascript">
    var example = new Vue({
      el:'#app',
      data:{
        parent:'父作用域'
        items:[
          {text:'文本1'},
          {text:'文本2'}
        ]
      }
    })
</script>

会被渲染为：
<ul id="app">
    <li>父作用域-文本1</li>
    <li>父作用域-文本2</li>
</ul>
注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【  ：】
<1>对象语法：
//进行类切换的例子
<div id="app">
    <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

渲染结果：
<!--因为hasError: false，所以text-danger不被渲染-->
<div class = "is-active"></div>

<2>数组语法
<div id="app">
    <!--数组语法：errorClass在data对应的类一定会添加-->
    <!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

渲染结果：
<!--因为activeClass: false，所以is-active不被渲染-->
<p class = "text-danger"></p>

<3>直接绑定数据对象
<div id="app">
    <!--在vue实例的data中定义了classObject对象，这个对象里面是所有类名及其真值-->
    <!--当里面的类的值是true时会被渲染-->
    <div :class="classObject">12345</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            classObject:{
                'is-active': false,
                'text-danger':true
            }           
        }
    })
</script>

渲染结果：
<!--因为'is-active': false，所以is-active不被渲染-->
<div class = "text-danger"></div>

v-model

这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接跟着变。这就是双向数据绑定。
v-model修饰符
<1>  .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<input v-model.lazy="msg">

<2>  .number
自动将用户的输入值转化为数值类型
<input v-model.number="msg">

<3>  .trim
自动过滤用户输入的首尾空格
<input v-model.trim="msg">

v-on

v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【  @  】
<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

事件修饰符


.stop  阻止事件继续传播

.prevent 事件不再重载页面

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

熟悉Vue模板

<template>//***************************************************************************html代码start
<div class="wrapper">
          此处编写你的页面元素
</div>
</template>//**************************************************************************html代码end
 
<script>//********************************************************************************js代码start
 
 
export default {
data(){
return {//存放当前组件变量的值
 
 
}
},
computed:{//计算属性：监控数据使用有变动，一旦有变动则自动触发
},
methods:{//存放页面操作方法
},
created(){//请求接口数据
}
}
</script>//*********************************************************************************js代码end
 
 
<style lang="scss" scoped>//*******************************************************css样式代码start
.wrapper{}
//编写样式
</style>//*********************************************************************************css样式代码end

npm run dev 打包运行
npm run build 打包
npm install -g server 使用静态服务器工具包
serve dist http://localhost:5000

发布使用动态的web服务器
修改配置webpack.prod.conf.js

output:{
    publicPath:'/xxx/'  //打包文件的名称
}

重新打包
npm run build
修改dist文件夹为项目名称:xxx
将xxx拷贝到运行的tomcat的webapps目录下
访问:http://localhost:8080/xxx

config 文件中
port :设置端口号
autoOpenBrower: false\true 是否自动打开浏览器

组件间通信 SLOT

• 此方式用于组件向子组件传递”标签数据”

使用localStorage存储数据的工具模块
函数
对象
需要向外面暴露七个功能还是多个功能

Vue项目中常用的2个ajax库
vue-resource:vue插件，非官方库，vue1.x使用广泛
npm install vue-resource --save
axios:通用的ajax请求库，官方推荐，vue2.x使用广泛
npm install axios --save

欢迎大家提议、分享、交流、共同学习进步