Vue学习之路（基础篇）

Vue 作者

尤雨溪 国内的

独立开源开发者（自由职业者）

现全职开发和维护vue.js

2014年开发vue2.0目前最火

---

1.1 vue的优势

通俗定义：

1.vue的出现可以让我们在页面中完成复杂操作，可以简化

dom编程甚至不写任何的dom编程代码

2.vue内置双向绑定机制 MVVM机制—前后端分离

html+js–>html+css+JQuery–>vue(前后端分离)–>前端系统+json（ajax）+后端系统

二. Vue入门

===========================================================================

2.1 下载Vuejs

//开发版本:

//生产版本:

2.2 Vue第一个入门应用

first page

获取vue中的数据：{ {message}}}

count的运算值：{ {count+3+2+5}}

name的值的长度：{ {name.length}}

username的值大写：{ {name.toUpperCase()}}

username的值是否为wanghj:{ {username== 'wanghj'}}

• 注意：

1、一张html页面只能定义一个vue实例<br /><br />2、el属性指定vue实例的作用范围，vue只能在实例范围内才会生效

3、data属性是在为vue实例绑定一些数据，可以通过{ {data中的属性的名字}}，获取对应属性值

4、vue实例中el属性可以书写任何css选择器，但是推荐id选择器<br /> 因为一个vue实例只能作用于一个具体的作用范围

2.3 Vue中的复杂数据

基本数据：{ {message}}

---

对象数据类型：{ {user}}}

对象类型的数据的值：{ {user.id}}---{ {user.name}}---{ {user.age}}

---

数组类型数据：{ {names}}

数组第一个值：{ {names[0]}}

数组中第二个对象的姓名：{ {users[0].name}}

三. v-text和v-html

===================================================================================

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中** innerText**

{