Vue快速入门（狂神版）
Vue入门
1.什么是MVVM?
MVVM(Model-View-ViewModel)是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。它源自与经典的MVC模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用
为什么要使用MVVM?
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型（Model）
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel）,设计人员可以专注于页面设计。
可测试：界面向来是比较难于测试的，而现在测试可以针对ViewModel来写
2.第一个Vue项目
第一个Vue程序
1.导入Vue.js
CDN导入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
2.new 一个vue对象
3.绑定一个元素
4.放数据
5.从模板里取出来
<div id="app">
{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
script>
3.Vue基本语法
v-bind
使用v-bind来绑定元素特性！
v-开头的被称为指令
v-bind这个指令的意思是“将这个元素节点的title特性和Vue实例的message属性保持一致
<div id="app">
<span v-bind:title="message">鼠标悬停在此处，可以查看动态绑定的信息span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
script>
v-if、v-else
<div id="app">
我是trueh1> <h1 v-else>我是flaseh1> div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script> <script> var vm = new Vue({ el:"#app", //Model:数据 data:{ ok: "lyl" } }); script>
v-for
<div id="app">
<li v-for="item in items">
{{item.message}}
li>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
items:[
{message: "我是itme1"},
{message: "我是itme2"}
]
}
});
script>
methods
<div id="app">
<button v-on:click="say">click mebutton>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message: "我是Vue"
},
methods:{//方法必须定义在Vue的method对象中
say:function (event){
alert(this.message);
}
}
});
script>
4.Vue的双向绑定
什么是双向数据绑定？
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也是Vue的精髓之处。
注意，我们所说的数据双向绑定，一定是对于Ui控件来说的，非UI控件不会涉及到数据的双向绑定，单项数据绑定是使用状态管理工具的前提，如果我们使用vuex,那么数据流也是单项的，这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定？
在vue.js 中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js
的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪;局部性数据流使用双向，简单易操作。
在表单中使用双向数据绑定？
你可以用v-model 指令在表单
,