什么是Vue?
Vue就是一个MVVM模式的实现者,MVVM最重要的就是ViewModel,ViewModel是为了实现数据的双向绑定,就是为了解耦.
- Model：模型层，在这里表示 JavaScript 对象
- View：视图层，在这里表示 DOM（HTML 操作的元素）
- ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer(观察者)
- ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化，并能够通知数据发生改变
Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定. 并且是一个渐进式框架
Vue使用
布局,语法,组件,网络
下载node.js
官网下载
兼容性
Vue 不支持 IE8 及以下版本，但它支持所有 兼容 ECMAScript 5 的浏览器。
导入文件
<!-- 开发环境版本，包含了有帮助的命令行警告,不带版本号使用最新版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 ,生产环境指定版本号防止新版本出错-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
第一个项目
html:5+tab生产h5模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="vue">
{
{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
说明
- el:’#vue’：绑定元素的 ID
- data:{message:‘Hello Vue!’}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!
- 此时就可以在控制台直接输入 vm.message=‘xxx’ 来修改值，中间是可以省略 data 的.在这个操作中，我并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的 数据绑定 功能实现的；MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。
Vue 实例的生命周期
Vue 实例有一个完整的生命周期，也就是从 开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载 等一系列过程
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。
注意： created 钩子函数和 mounted 钩子函数的区别
钩子函数的触发时机
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
Vue常见问题
input复用问题
Vue进行DOM渲染时,出于性能的考虑,会尽可能复用已存在的元素,而不是创建新的元素.
导致删除原input渲染一个新的input的时候用户输入的信息还在.
解决:
- 当两个input的key相同时会复用
- 不同时会创建一个新的元素而不是复用已存在的
<span v-if="isM"><input .... key="username"></span>
<span v-else><input .... key="email"></span>
Vue语法
vue对象
被vue接管的属性或方法中:
- 如果某个参数符合变量的命名规范,Vue会将其当成属性名或方法名进行解析,这时如果未定义则会产生错误(Property or method “变量” is not defined on the instance but referenced during render.).
- 使用引号包裹,Vue就不会自行进行解析了.
<script type="text/javascript">
var vm = new Vue({
//el绑定元素id
el: '#vue',
//data初始化数据, 类型为: 对象|function
data: {
message: 'Hello Vue!'
},
//data组件的定义只接受 function
//data: function () {
// return { a: 1 }
//},
//methods初始化方法,调用方法需要带()
//方法中使用this调用data中的数据
methods: {
sayHi: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert(this.message);
}
},
//过滤器,类似linux的管道流
//使用过滤器: {
{item.price | showPrice}}
filters:{
//过滤方法 </
最低0.47元/天 解锁文章
8378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
