锐客网

  1. 首页 > 睿知 > it技术 > >

vue|Vue快速入门（狂神版）

vuevue.js

Vue入门 1.什么是MVVM?

MVVM(Model-View-ViewModel)是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。它源自与经典的MVC模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用
vue|Vue快速入门（狂神版）
文章图片

为什么要使用MVVM?
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型（Model）
  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel）,设计人员可以专注于页面设计。
  • 可测试：界面向来是比较难于测试的，而现在测试可以针对ViewModel来写
2.第一个Vue项目 第一个Vue程序
1.导入Vue.js
CDN导入
src="http://img.readke.com/220805/12145W160-1.jpg">

2.new 一个vue对象
3.绑定一个元素
4.放数据
5.从模板里取出来
{{message}}
src="http://img.readke.com/220805/12145W160-1.jpg">> var vm = new Vue({ el:"#app", //Model:数据 data:{ message:"hello,vue!" } });

3.Vue基本语法 v-bind
使用v-bind来绑定元素特性！
v-开头的被称为指令
v-bind这个指令的意思是“将这个元素节点的title特性和Vue实例的message属性保持一致
v-bind:title="message">鼠标悬停在此处，可以查看动态绑定的信息
src="http://img.readke.com/220805/12145W160-1.jpg">> var vm = new Vue({ el:"#app", //Model:数据 data:{ message:"hello,vue!" } });

v-if、v-else
我是true 我是flase
src="http://img.readke.com/220805/12145W160-1.jpg">> var vm = new Vue({ el:"#app", //Model:数据 data:{ ok: "lyl" } });

v-for
  • {{item.message}}
    • src="http://img.readke.com/220805/12145W160-1.jpg">> var vm = new Vue({ el:"#app", //Model:数据 data:{ items:[ {message: "我是itme1"}, {message: "我是itme2"} ] } });

    methods
    src="http://img.readke.com/220805/12145W160-1.jpg">> var vm = new Vue({ el:"#app", //Model:数据 data:{ message: "我是Vue" }, methods:{//方法必须定义在Vue的method对象中 say:function (event){ alert(this.message); } } });

    4.Vue的双向绑定 什么是双向数据绑定？
    Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也是Vue的精髓之处。
    注意，我们所说的数据双向绑定，一定是对于Ui控件来说的，非UI控件不会涉及到数据的双向绑定，单项数据绑定是使用状态管理工具的前提，如果我们使用vuex,那么数据流也是单项的，这时就会和双向数据绑定有冲突。
    为什么要实现数据的双向绑定？
    在vue.js 中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js
    的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪; 局部性数据流使用双向，简单易操作。
    在表单中使用双向数据绑定？
    你可以用v-model 指令在表单 ,