vue.js入门笔记
vue.js入门笔记（ps：前端初级）
第一章 vue.js是什么？
Vue（法语） view（英语）
是一套构建用户界面的MVVM框架。核心库只关注视图层。并且非常容易学习。
非常容易与其它库或者已有的项目进行整合
1.1 Vue.js的目的
vue.js的产生核心是为了解决如下三个问题：
1、解决数据绑定的问题：（从angular.js人们认识到）
2、Vue.js框架产生的主要目的是为了开发大型单页面应用（SPA：Single page application ）
angular.js对PC端支持良好，但是对移动端支持一般。而Vue.js主要支持移动端，也支持PC端。
3、它还支持组件化。也就是可以将页面封装成若干个组件。采用积木式编程，这样使页面的复用度达到最高（支持组件化）
1.2 Vue.js特性
1.MVVM
M：model 业务模型 ，用处：处理数据，提供数据
V：view 用户界面、用户视图
业务模型model中的数据发生改变的时候，用视view也会随之变化。用户试图view改变的时候，业务模型model中的数据也可以发生改变。
2.组件化
3.指令系统
4.Vue.js2.0 开始支持虚拟DOM(Vuejs 1.0是操作的真实DOM，而不是虚拟DOM)
虚拟DOM可以提升页面的刷新速度。
第二章 Vue.js入门
使用Vue.js的步骤：
第一步：在html中引入这个Vue.js。（通过一个script的标签）
第二步：Vue.js提供了一个Vue,我们需要创建一个对象
new Vue();
第三步:在用户界面view中，通过{{}}形式将data中的数据显示在页面中。
在用户界面中，{{}}中绑定的data的key（键值），而在界面中显示的是该key的value。
Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。
app这个变量会搭理vue中data数据，所以我们访问数据的时候，直接使用app.name(例子)
如果我们要实现前后台交互，只要将从后台得到的数据放在app.data中，页面就会自动绑定，这样就实现了从model>view的数据流向。
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>vue.js入门</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <h1 >{{name}}，欢迎您来到Vue.js的乐园！</h1>
10 </body>
11 <script>
12 var app = new Vue({
13 el:'#demo', //声明Vue.js管理的边界（可以是ID，类，标签名等选择器）（PS：同样的选择器，这里只会匹配第一个。。）
14 data:{ //data核心作用是存放显示在页面中的数据，需要是一个对象
15 name:'akun'
16 }
17 });
18 </script>
19 </html>第三章 Vue.js指令
指令，其实指的就是vue自定义的v- 开头的自定义属性，每个不同的属性都有各自不同的意义和功能。
指令的语法：
v-指令名称=“表达式判断或者是业务模型中属性名或者事件名”
3.1 v-text
作用：操作元素中的纯文本
快捷方式：{{}} （PS：最外面的引号是vue.js的界限符号，并非字符串的引号，所以里面是字符串的时候，需要另加引号）
示例1
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue.js控制纯文本（上）</title>
<script src="js/vue.js"></script>
</head>
<body>
<h1 ></h1>
<script>
new Vue({
el:'#demo', //vue管理的边界
data:{
year:new Date().getFullYear(),
month:new Date().getMonth()+1,
day:new Date().getDate()
}
});
</script>
</body>
</html>
示例2
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue.js控制纯文本（下）</title>
<script src="js/vue.js"></script>
</head>
<body>
<div >
<p>姓名：{{person.name}}</p>
<p>年龄：{{person.age}}</p>
<p>性别：{{person.sex}}</p>
</div>
<script>
var app = new Vue({
el:'#demo',
data:{
person:{
name:'xushankun',
sex:'男',
age:'25'
}
}
});
app.person.sex='男的吗'; //通过js来控制文本
console.log(app.person.sex);
</script>
</body>
</html>
3.2 v-html
作用：操作html
示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue.js控制html</title>
<script src="js/vue.js"></script>
</head>
<body>
<div >{{msg}}</div>
<script>
var app = new Vue({
el:'#demo',
data:{
msg:' <img src="images/03.jpg" alt="">'
}
});
</script>
</body>
</html>
3.3 v-bind
作用：v-bind绑定页面中的元素属性。例如：a的href属性，img的src、alt和title属性。
语法：v-bind：元素的属性名 = "data中键名"
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue.js控制html</title>
<script src="js/vue.js"></script>
</head>
<body>
<div >
<img v-bind:src="msg" alt="">
</div>
<script>
var app = new Vue({
el:'#demo',
data:{
msg:'images/03.jpg'
}
});
</script>
</body>
</html>
在view模板中，可以使用简单的JS表达式，例如：
<p>{{num==1? '输出A' : '输出B'}}</p>
- 上一篇 »Vue学习笔记分享之Vue组件化编程
- 下一篇 »nodejs入门学习笔记二——解决阻塞问题
