Vue.js简单入门

 1、Vue是什么？

Vue.js（读音 /vjuː/, 相似于view）是一套构建用户界面的渐进式框架。
与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。所以它很是容易学习，很是容易与其它库或已有项目整合。另外一方面，在与相关工具和支持库一块儿使用时，Vue.js 也能完美地驱动复杂的单页应用。

2、Vue的优点

1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化

3、Vue和Jquery的不一样

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操做，其实和原生的HTML的区别只在于能够更方便的选取和操做DOM对象，而数据和界面是在一块儿的。好比须要获取label标签的内容：$("lable").val();,它仍是依赖DOM元素的值。 

Vue则是经过Vue对象将数据和View彻底分离开来了。对数据进行操做再也不须要引用相应的DOM对象，能够说数据和View是分离的，他们经过Vue对象这个vm实现相互的绑定。

vue适用的场景：复杂数据操做的后台页面，表单填写页面
Jquery适用的场景：好比说一些html5的动画页面，一些须要js来操做页面样式的页面，然而两者也是能够结合起来一块儿使用的，vue侧重数据绑定，jquery侧重样式操做，动画效果等，则会更加高效率的完成业务需求。

4、Vue的安装

1.直接用<script>导入
直接在官网下载并用 <script> 标签引入
2. CDN
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （国内不稳定）。           
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src=“https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js”></script>）。
3. NPM方法
node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像  

5、Vue起步

1.模板语法：
<div id="app">{{ message }}</div>
2. Vue实例会把模板和数据结合起来挂载到挂载点上。
var app = new Vue({//这个vue实例接管id为app的dom元素，只会处理挂载点内的内容el: ‘#app’,//挂载点
template:’<h1>hello {{msg}}</h1>’,//模板data: {message: 'Hello Vue!'}})

一个简单的vue实例的结构

6、Vue生命周期

可参考：https://cn.vuejs.org/v2/guide/instance.html

7、Vue基本语法

 　　1.v-bind

         

           渲染后的效果：

　　　

           使用v-bind动态绑定class：

           

　　 

        2.v-on:click

        

       

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是很是常见的需求。尽管咱们能够在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。以前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive

 

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重载页面 --><form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符能够串联 --><a v-on:click.stop.prevent="doThat"></a>

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

　　3. v-if   （若是值为false,则页面不渲染）

        

        4. v-else-if

        

        5. v-show（若是值为false，页面依然渲染，只是添加了display:none）

　　

　　渲染后的效果：

　　

         6. v-for

　　  

         渲染后的效果：

         

           7.v-model用在表单 <input>、<textarea> 及 <select> 元素上建立双向数据绑定

            

　　　　渲染后的效果：

　　　　

　　　 8. 计算属性，在模板中放入复杂的逻辑，会让模板太重且难以维护,这时应用计算属性

               

  8、组件基础

         一个简单的组件

         

  

　　　　　　　PS1: 组件中经过 Prop接收传递过来的数据, v-bind 来动态传递 prop
　　　　　　Prop 是你能够在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

　　　　　　

　　　　　　

 　　　　   组件中向父组件中传递数据使用$emit方法来实现，经过事件向父级组件发送消息

                 

　　　　　当点击这个按钮时，咱们须要告诉父级组件放大全部博文的文本。幸亏 Vue 实例提供了一个自定义事件的系统来解决这个问题。

　　　　　咱们能够调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件：

　　　　　<button v-on:click="$emit('enlarge-text')">
　　　　　　　Enlarge text
　　　　　</button>
　　　　　而后咱们能够用 v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件同样：

　　　　　<blog-post
　　　　　　　...
　　　　　　　v-on:enlarge-text="postFontSize += 0.1"
　　　　　></blog-post>

　　　　　　

                     PS2: 每一个组件必须只有一个根元素

　　　　　　      

9、vue-cli脚手架

能够用来构建一个vue的工程，须要安装node, webpack(前端资源加载/打包工具,它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。)
1.使用npm（须要安装node环境）全局安装webpack,打开命令行工具输入：npm install webpack –g,安装完成以后输入 webpack –v
2.全局安装vue-cli，在cmd中输入命令: npm install --global vue-cli, 安装完成以后输入 vue –V
3.用vue-cli来构建项目, 进入自定义文件夹路径下，输入命令：vue init webpack testVue 在当前目录生成一个以该名称命名的项目文件夹