目录
1.vue是什么？
一套用于构建用户界面的渐进式JavaScript框架
1.1Vue的特点
1.采用组件化模式，提高代码复用率、且让代码更好维护。 2.声明式编码，让编码人员无需直接操作DOM,提高开发效率。 3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
找到官网：介绍 — Vue.js
点击教程
然后选择安装，（这里有俩版本，一个是开发的，一个是生产的，一般我们使用vue.js进行学习）
这俩的区别就是有无提示的问题， 再将vue.js文件放到我们的包里面并且引入
2.创建Vue实例
这里遵循的是一对一的原则，一个vue实例只能有一个容器，也只能操作该容器
<body>
<!-- 创建一个容器 -->
<div id="root">
<h1>hello,{
{name}}</h1> <!-- 使用插值语法用双重花括号包裹{
{}} 也就是【vue模板】-->
</div>
<h1>{
{name}}</h1><!-- 这里的Vue实例只是接管了id名为root的容器，所以只能再该容器中使用 -->
<script>
// 创建Vue实例,直传一个参数
new Vue({
el: '#root',// el用于指定当前Vue实例为那个容器服务，值一般为css选择器字符串
data: {
name: '大熊学Vue'
}
})
</script>
</body>3.模板语法
模板语法分为两大类
1.插值语法:
功能:用于解析标签体内容。 写法: { {js表达式}}，且可以直接读取到data中的所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件 等).
例: v- bind:href="xx"或简写为 “:”
href="xxx", xxx同样要写js表达式且可以直按读取到data中的所有属性。
注: Vue中有很多的指令，且形式都是: v-xx(还有v-model，v-if等)
<body>
<div class="demo">
<h1>插值语法</h1>
<h2>你好，{
{name}}</h2>
<hr>
<h1>指令语法</h1>
<a v-bind:href="school.url">{
{name}}的博客</a>
<!-- 简写 -->
<a :href="school.url">{
{school.name}}的博客</a>
</div>
<script>
new Vue({
el:'.demo',
data:{
name:'大熊',
// 也可以写成层级性的
school:{
url:'https://blog.csdn.net/zhaochen1127?type=download',
name:'jenny'
}
}
})
</script>
</body>4.数据绑定
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
注：1.双向绑定一 般都应用在表单类元素上(如: input、 select等)2.v-model:value可以简写为v- model,因为v- model默认收集的就是value值。
<body>
<div class="inp">
<!-- 单向数据绑定只能从data流向页面，而双向数据绑定可以互相流动 -->
单向数据绑定：<input type="text" :value="name"><br>
<!-- 注：v-model只能应用到表单类元素上 -->
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
new Vue({
el: ".inp",
data: {
name: '大熊'
}
})
</script>
</body>5.el与data的两种写法
这两种方法都可以获取到要控制的容器，所以使用哪一个都可以
<body>
<div class="one">
<h1>你好，{
{name}}</h1>
</div>
<script>
var a= new Vue({
// el:'.one', 第一种写法
data:{
name:'shanyu'
}
})
a.$mount('.one')// 第二种写法
</script>
</body>data的写法分别为对象式和函数式
<script>
new Vue({
el: '.one',
// 第一种对象式
data: {
name: '大熊'
},
// 第二种函数式
// 这里不可以使用箭头函数，箭头函数自身木有this
data() {
return {
name: '大熊'
}
}
})
</script>6.初识MVVM模型
啥是MVVM
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
M（model模型）：其实就是data中的数据
V（View试图）：模板，也就是DOM的页面
VM（试图模型ViewModel）：Vue实例
7.总结
1.既然想要使用vue就得先创建一个Vue实例,还要传入配置对象
2.容器里的代码依然符合html规范，只不过加入了些特殊的Vue语法
3.容器里的代码被称为[Vue模板]
4.Vue实例和容器是一一对应的
5.真实开发中只有一个Vue实例，并且会配合着组件起使用
6.{ {js表达式}}且js表达式可以自动读取到data中的所有属性
7.一旦data中的数据发生改变，那么页面中所用到该数据的地方也会自动更新
8.MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式
8.VUE之路思维导图（实时更新）
大家好我是大熊，一个学前端的旅行者也是一个前进的创作者
✍威尔科克斯曾说过:“当生活像一首歌那样轻快流畅时，笑颜常开乃易事，而在一切事都不妙时仍能微笑的人，才活得有价值。”