Vue简介
Vue是一款用于构建用户界面的JavaScript渐进式框架，基于标准HTML,CSS,和JavaScript构建，并提供换一套声明式、组件化的编程模型。帮助你高效地开发用户界面。由尤雨溪先生写的。
Vue的核心功能
声明式渲染: Vue基于标准的Html拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。
响应式: Vue会自动跟踪JavaScript状态变化并在改变发生时响应式更新DOM。
何为Vue的渐进式?
Vue是可以自底向上逐层的应用。从简单应用（只需要一个轻量级的核心库）到复杂应用:可以引入各式各样的Vue插件。
Vue的特点
- 采用组件化模式，提高代码复用率和维护性。
- 声明式编码，让编程人员无需直接操作DOM(无需命令式编码),提高开发效率。
- 通过虚拟DOM和优秀的Diff算法提高了性能。尽量复用DOM节点。
Vue的安装
点击Vue2的教程选择安装，如下所示:
开发版本包含警告和调试模式，而生成版本忽略了警告模式，并且所占体积小。
打开Visual Studio Code开发工具，导入下载的vue.js,如下所示。
技巧:
1.可以通过copy line down 命令行来设置自己的复制光标所在位置的内容到下一行。
2.通过输入!可以快速的生产html基本结构。
运行打开我们的控制台，出现警告如下所示:
解决警告:
1.Download the Vue Devtools extension for a better development experience:把Vue的开发工具下载即可解除。
选择Chrome的开发工具安装。国外下载比较慢，可以去百度搜索下载。把安装包放入浏览器的管理拓展程序中，记得打开开发者模式。
2.You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
打开vue学习找到api,如下所示:
打开控制台观察我们的vue
将productionType关闭即可。
在html文件中添加如下代码:
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
</script>使用Vue
Vue的简单Hello小案例:
在html里写一个div容器。
<!-- 准备好一个容器 -->
<div id="#root">
<h1>hello,尚硅谷</h1>
</div>打开浏览器控制台查看，发现我们的网页出现404错误，网站的页签图标未找到，浏览器会默认请求页签图标。
加入一个命名为favicon.ico小图标问题解决。
使用Vue步骤:
1.创建一个Vue实例
2.给Vue实例传入配置对象
3.容器内部取值会去Vue实例的data区域的属性中去取。
<!-- 准备好一个容器 -->
<div id="root">
<h1>hello,{{name}}</h1>
<!-- 插值语法: 用于标签体内部，双括号内的内容是一个JS表达式,会去读取vue所有的属性，并将对应的属性 -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root', //el用来指定当前Vue实例为哪个容器服务。
//el: document.getElementById('root') //自己找到容器绑定在Vue实例中
data:{ //data用来存储数据，数据供el所指定的容器使用。
name:'张三',
age: 12
}
})
</script>总结:
1.使用Vue,首先需要插件一个Vue实例，且要传入一个配置对象，通过el实现。
2.root内部依旧遵守html规范，只是有一些特殊的Vue语法加入。
3.root容器里面的代码称为Vue模板
Vue实例和div容器之间对应的关系
多个Vue实例为同一个容器服务。
new Vue({
el: '#root', //el用来指定当前Vue实例为哪个容器服务。
//el: document.getElementById('root') //自己找到容器绑定在Vue实例中
data:{ //data用来存储数据，数据供el所指定的容器使用。
name:'张三',
age: 12
}
})
new Vue({
el:'#root',
data:{
data:'李四',
age:'13'
}
})发现Vue实例和容器一一对应，默认使用首先绑定容器的Vue实例。
一个Vue实例为多个容器服务。
<!-- 准备好一个容器 -->
<div id="root">
<h1>hello,{{name}}</h1>
<h2>age:{{age}}</h2>
<!-- 插值语法: 用于标签体内部，双括号内的内容是一个JS表达式,会去读取vue所有的属性，并将对应的属性 -->
</div>
<div id="root">
<h1>sex: {{sex}}</h1>
</div>
new Vue({
el: '#root', //el用来指定当前Vue实例为哪个容器服务。
//el: document.getElementById('root') //自己找到容器绑定在Vue实例中
data:{ //data用来存储数据，数据供el所指定的容器使用。
name:'张三',
age: 12,
sex: '男'
}
})
发现Vue实例只能给同名的第一个div服务。
一个Vue实例对应一个div容器。
打开浏览器的Vue可以修改页面数据
总结
- Vue实例和容器是一一对应的。
- 真实开发中只有一个Vue实例，配合组件一起使用。
- 插值语法{{xxx}}的xxx要写js表达式，且xxx可以自动读取到data的所有属性，一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。
模板语法
模板语法有插值语法和指令语法:
插值语法使用:
<!-- 插值语法 -->
<div id="root">
<h1>插值语法</h1>
<h2>姓名:{{name}}</h2>
</div>指令语法使用:
<!-- 指令语法 v-xxx-->
<div id="app">
<h1>指令语法</h1>
<a v-bind:href="url">点击我进入一个链接</a>
</div>对应的Vue实例如下:
new Vue({
el:'#root',
data:{
name: '张三'
}
})
new Vue({
el: '#app',
data:{
url:""
}
})总结:
1.插值语法:
功能: 用于解析标签体内容
写法: 使用{{xxx}},其中xxx是表达式，且可以直接读取data中的所有属性。
2.指令语法:
功能: 用于解析标签(包括标签属性，标签体内容，绑定事件…)
写法: v-??? 举例v-bind:href=“xxx”,xxx是js表达式且直接读取data中的所有属性。
3.重名的属性，可以将一个重名的属性封装在一个对象中。
数据绑定
数据绑定只好用于输入组件。
<div id="app">
单向数据绑定<input v-bind:value="msg">
双向数据绑定<input v-model:value="msg">
</div>
new Vue({
el:'#app',
data:{
msg: 'hello'
}
})v-bind:单向数据绑定
v- model:双向数据绑定
不是什么情况下都使用v-model,v-model只能应用在表单类元素(输入类元素)上，拥有value属性才行,进行交互。
总结:
总结:
1.单向绑定: 数据只能从data流向页面
2.双向绑定：数据不仅能从data流向页面，也能从页面流向data。
备注:双向绑定一般应用在表单类元素上，可以简写为v-model，默认的属性为value。
el和data的两种写法
el: 指定Vue实例为哪些容器服务
1.el在Vue实例内部指定,如以下形式
new Vue({
el:'#app',
data:{
msg: 'hello'
}
})2.使用$mount挂载容器,指定el的值
const vm = new Vue({})
vm.$mount('#app')data:存储数据，用于给el指定的容器提供数据
1.对象式
//data的第一种写法:对象式
data:{
msg: 'hello'
}2.函数式
// data的第二种写法:函数式
data:function(){
return{
console.log('@@@',this) //此处的this是Vue实例对象。
name:'hello'
}
}data函数式不支持箭头函数，箭头函数是javaScript的语法。
使用组件时，要使用函数式。
