没有合适的资源?快使用搜索试试~ 我知道了~
Vue快速入门(详细).doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 16 浏览量
2022-07-09
20:25:12
上传
评论
收藏 994KB DOC 举报
温馨提示
试读
39页
Vue快速入门(详细).doc
资源推荐
资源详情
资源评论
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 导入
2.new 一个 vue 对象
3.绑定一个元素
4.放数据
5.从模板里取出来
{{message}}
var vm = new Vue({
el:”#app”,
//Model:数据
data:{
message:”hello,vue!”
}
});
3.Vue 基本语法
v-bind
使用 v-bind 来绑定元素特性!
v-开头的被称为指令
v-bind 这个指令的意思是“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一
致
鼠标悬停在此处,可以查看动态绑定的信息
var vm = new Vue({
el:”#app”,
//Model:数据
data:{
message:”hello,vue!”
}
});
v-if、v-else
我是 true
我是 flase
var vm = new Vue({
el:”#app”,
//Model:数据
data:{
ok: “lyl”
}
});
v-for
{{item.message}}
var vm = new Vue({
el:”#app”,
//Model:数据
data:{
items:[
{message: “我是 itme1”},
{message: “我是 itme2”}
]
}
});
methods
click me
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 指令在表单 ,
及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有
些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一
些极端场景进行一些特殊处理。
注意: v-model 会忽略所有表单元素的.value、checked、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的
data 选项中声明初始值!
通过 v-model 实现数据绑定
请输入文本:{{message}}
--请选择--
剩余38页未读,继续阅读
资源评论
书博教育
- 粉丝: 1
- 资源: 2836
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功