Vue的简介：
Vue (是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue语言的特点：
易用
在有HTML，CSS，JavaScript的基础上，快速上手。
Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。
Vue.js 的 API 的对于其他框架的参考不仅是参考，其中也包含了许多 Vue.js 的独特功能。
灵活
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能
20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化
一：快速入门案例
案例达到效果：在输入框中输入任意信息，该信息可以在输入框后实时展示出来
1.创建web工程，导入js文件
2.创建.html页面，在页面中引入vue.js文件
3.创建vue核心对象，进行数据绑定
4.创建视图，取出数据时使用{{数据名称}将对应数据取出
5.源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的快速入门</title>
</head>
<body>
<!--编写视图-->
<!--使用 {{}} 将数据取出-->
<div id="app" class="cc">
<input v-model="msg">{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
//写入选择器,id对应#id,class对应.class，此处使用#app选择器
el:"#app",
data(){
//初始化数据对象
return{
msg:""
}
}
});
</script>
</body>
</html>
二：vue常用的指令
1.v-bind 的简单实用
案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来
1.1引入vue.js文件，创建vue的核心对象
1.2绑定视图
1.3源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--绑定视图-->
<div id="app" class="cc">
<!-- <a v-bind:href="url" >百度一下</a>{{url}}-->
<!-- 简写-->
<a :href="url">点我点我</a>{{url}}
<br>
<input type="text" v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
//写入选择器,id对应#id,class对应.class，此处使用#app选择器
el:"#app",
data(){
//初始化数据对象
return{
url:""
}
}
});
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看