Vue.js(读音 /vjuː/, 相似于view)是一套构建用户界面的渐进式框架。
与其余重量级框架不一样的是,Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层,而且很是容易学习,很是容易与其它库或已有项目整合。另外一方面,Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。css
Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。html
Vue.js 自身不是一个全能框架——它只聚焦于视图层。所以它很是容易学习,很是容易与其它库或已有项目整合。另外一方面,在与相关工具和支持库一块儿使用时,Vue.js 也能完美地驱动复杂的单页应用。前端
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化vue
jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操做,其实和原生的HTML的区别只在于能够更方便的选取和操做DOM对象,而数据和界面是在一块儿的。好比须要获取label标签的内容:$("lable").val();,它仍是依赖DOM元素的值。 html5
Vue则是经过Vue对象将数据和View彻底分离开来了。对数据进行操做再也不须要引用相应的DOM对象,能够说数据和View是分离的,他们经过Vue对象这个vm实现相互的绑定。node
vue适用的场景:复杂数据操做的后台页面,表单填写页面
Jquery适用的场景:好比说一些html5的动画页面,一些须要js来操做页面样式的页面,然而两者也是能够结合起来一块儿使用的,vue侧重数据绑定,jquery侧重样式操做,动画效果等,则会更加高效率的完成业务需求。jquery
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的淘宝镜像 webpack
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!'}})web
一个简单的vue实例的结构ajax
可参考:https://cn.vuejs.org/v2/guide/instance.html
渲染后的效果:
使用v-bind动态绑定class:
在事件处理程序中调用 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>
渲染后的效果:
渲染后的效果:
渲染后的效果:
一个简单的组件
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的工程,须要安装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 在当前目录生成一个以该名称命名的项目文件夹