Vue.js简单入门

 一、Vue是什么？

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

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

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

二、Vue的优势

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

三、Vue和Jquery的不同

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

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。

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

四、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的淘宝镜像  

五、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实例的结构

六、Vue生命周期

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

七、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. 计算属性，在模板中放入复杂的逻辑，会让模板过重且难以维护,这时应用计算属性

               

  八、组件基础

         一个简单的组件

         

  

　　　　　　　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: 每个组件必须只有一个根元素

　　　　　　      

九、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 在当前目录生成一个以该名称命名的项目文件夹

           

                 

 

转载于:https://www.cnblogs.com/Regina-wisdom/p/9850736.html