目录
Vue是一套用于构建用户界面的渐进式JavaScript框架。
Vue的特点：
1.采用组件化模式，提高代码复用率、且让代码更好维护。
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
前导知识：ES6语法规范、ES6模块化、包管理器、原型和原型链、数组的常用方法、axios、promise...
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
3.root容器里的代码被称为“Vue模板”。
4.Vue实例和容器是一一对应的。
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
6.{ {xx}}中的xx要写js表达式，并且xx可以自动读取到data中的所有属性。
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新Vue。
模板语法有两大类：
1.插值语法：用于解析标签体内容，写法：{ {xx}}，xx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：用于解析标签（包括：标签属性、标签体内容、绑定事件...），例：v-bind:href=”xx”或简写为:href=”xx”，xx写js表达式，且可以直接读取到data中的所有属性（Vue中有很多指令，且形式都是v-xx，此处只是拿v-bind举例）。
<body>
<div id="root">
<!--插值语法-->
<h1>hello {
{name.toUpperCase()}},name:{
{a.name}}</h1>
<!-- hello WORLD,name:null -->
<!-- 双大括号内放表达式，js表达式的结果是一个值，js语句只控制代码走向没有值 -->
<!-- 指令语法 -->
<a v-bind:href="url">点我去百度</a>
<!-- "v-bind:" 可以简写为 ":" -->
</div>
<script>
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
// 创建Vue实例
const x=new Vue({
el:'#root', //指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{ //data用于存储数据，数据供el所指定的容器去使用
name:'world',
a:{
name:'null'
},
url:'http://www.baidu.com'
}
});
</script>
</body>Vue中有两种数据绑定的方式：
1.单向绑定（v-bind）：数据只能从data流向页面。
2.双向绑定（v-model）：数据可以从data流向页面，也可以从页面流向data。双向绑定一般都应用在表单类（输入类）元素上。v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
// 创建Vue实例
const x=new Vue({
el:'#root',
data:{
name:'world'
}
});
</script>
</body>el和data的两种写法：
el：（1）new vue的时候配置el属性。（2）先创建Vue实例，随后再通过实例.$mount(‘#root’)指定el的值。
data：（1）对象式。（2）函数式。目前两种写法都可以用，但在写组件时必须使用函数式，否则会报错。
由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例，而是window对象了。
<body>
<div id="root">
<h1>hello,{
{name}}</h1>
</div>
<script>
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
// 创建Vue实例
const x=new Vue({
// el:'#root',
// data:{
// name:'tml'
// }
data:function(){//data的另一种写法，写组件的时候必须用这种写法
console.log(this);//此处this是Vue实例对象
return{
name:'tml'
}
}
});
x.$mount('#root');//el的另一种写法
</script>
</body>MVVM模型：
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此我们经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。data中所有的属性，最后都出现在了vm身上。vm身上所有的属性，在Vue模板中都可以直接使用。
最低0.47元/天 解锁文章
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
