Vue2.0
第一章 Vue核心
一、Vue简介
1. Vue是什么?
- 一套用于构建用户界面的渐进式JavaScript框架
- 构建用户界面:数据 => 界面
- 渐进式:Vue 可以自底向上逐层的应用
- 简单应用:只需一个轻量小巧的核心库
- 复杂应用:可以引入各式各样的Vue插件
- 尤雨溪开发
2. Vue的特点
- 采用组件化模式,提高代码复用率,且让代码更好维护
- 声明式编码,让编码人员无需直接操作DOM,提高开发效率
- 使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点
3. Vue的安装
- 官网引入vue.js 或 vue.min.js
二、初识Vue
<!--
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;(☆)
注意区分:js表达式 和 js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
-->
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
// 创建Vue实例
new Vue({
el: '#root', // el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data: { // data中用于存储数据,数据供el所指定的容器去使用
name: '小帽'
}
})
三、模板语法
- 模板
- html中包含了一个js语法代码,语法分为两种:
- 插值语法(双大括号表达式)
- 用于解析标签体内容
- {{xxx}},xxx 会作为js表达式解析
- 指令语法(以v-开头)
- 解析标签属性、解析标签体内容、事件
- v-bind:href = ‘xxxx’, xxxx 会作为js表达式被解析
- 解析标签属性、解析标签体内容、事件
- 插值语法(双大括号表达式)
- html中包含了一个js语法代码,语法分为两种:
<!--
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子。
-->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1</a>
<a :href="school.url">点我去{{school.name}}学习2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'小帽学堂',
url:'http://www.baidu.com',
}
}
})
</script>