对Vue.js的理解
-
官方解释：一套用于构建用户界面的渐进式框架。渐进式，就是我们可以一步一步、有阶段性地来使用Vue.js，不用一开始就要会使用所有的东西。
-
Vue是一套构建用户界面的框架，只关注视图层，可以配合第三方库或既有项目进行整合。
-
vue的核心概念，就是不再操作DOM元素，程序员只需要专注于关心业务逻辑
框架和库的区别
- 框架：我们可以依照框架的规定很简单的完成一些事情，但是呢，我们不能去改变他只能按照他的要求去使用它。比如Vue，Angular等。框架更多的时候是一套解决方案。注意：是一套，不是个别。如果项目需要更换框架，那么就需要重构整个项目。
- 库（插件）：提供某一个小功能。如果某个库无法满足某些需求，可以很容易地切换到其他库去实现。类似于jQuery库，就是一个轻量级的库
后端的MVC和前端的MVVM区别
- MVC是后端的分层开发概念
- MVVM是前端视图层的概念，主要关注于视图层分离。MVVM把前端视图层分为M（Model）、V（View）和VM（View Model）
Vue基本代码结构
在使用Vue.js之前，我们需要先导入Vue.js库。基本代码结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本代码</title>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个元素中的所有内容-->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<!-- 1. 导入Vue包-->
<script src="../lib/vue-2.4.0.js"></script>
<script>
// 2. 创建一个Vue实例
// 当我们导入包后，在浏览器的内存中，就多了一个Vue的构造函数
/* ！！！注意：我们 new 出来的这个 VM 对象，就是我们 MVVM 中的 VM调度者*/
let vm = new Vue({
el:"#app", // 表示，当前我们 new 的这个Vue实例，要控制页面上的哪个区域
/* 这里的 data 就是 MVVM 中的 M ，专门用来保存 每个页面的数据 */
data:{ //data 属性中，存放的是 el 中要用到的数据
msg:"欢迎学习Vue" // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，
// 程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
</html>
插值与表达式
- 插值表达式
使用双大括号“{{ }}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。例如：
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'我是一个大大的h1标签'
}
})
</script>
大括号里面的内容会被替换为 我是一个大大的h1标签，通过任何方法修改数据msg，大括号的内容都会被实时替换。
- v-text
<h4 v-text="msg">+++++++++</h4>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'我是一个大大的h1标签'
}
})
</script>
需要注意的是：插值表达式有时会因为网页加载过慢而出现闪烁问题，这时我们可以定义一个 v-cloak 属性来解决闪烁问题
<div id="app">
<p v-clock>{{ msg }}</p>
</div>
另外，v-text 默认情况下，是不存在闪烁问题的。但是，v-text会覆盖元素中原有的内容，而 v-cloak 只会替换自己的这个占位符，不会把整个内容清空。
- v-html
如果有的时候就是想输出HTML，而不是将数据解释后的纯文本，可以使用v-html:
<div id="app">{{ msg }}</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'<input type="button" value="开启">'
}
})
</script>
msg里的内容会被渲染为一个type属性为button的按钮，而不是纯文本。v-html主要用于渲染HTML页面。
Vue指令：v-bind的三种用法
- 直接使用指令 v-bind
v-bind的基本用途是动态更新HTML元素上的属性，比如id、class等。
给 input标签 的 title属性 添加 v-bind 指令，可以动态设置 title属性值 为 msg 中对应的内容:
<div id="app">
<input type="button" value="按钮" v-bind:title="msg">
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'123',
}
})
</script>
- 使用简化指令
v-bind 语法糖为 ：，因此上述代码还可以简写如下：
<div id="app">
<input type="button" value="按钮" :title="msg">
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'123',
}
})
</script>
- 在绑定时，拼接绑定内容
绑定的时候，还可以追加内容：
<div id="app">
<input type="button" value="按钮" :title="msg + ',我是被追加的内容' ">
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'123',
}
})
</script>
Vue指令：v-on使用
v-on指令用来绑定事件监听器。在button按钮上，使用 v-on:click 给该元素绑定一个点击事件，在普通元素上，v-on 可以监听原生的DOM事件，除了click外，还有dblclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据。
<div id="app">
<input type="button" value="按钮" :title="myTitle + 'Aries101'" v-on:click="show">
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
myTitle: "这是一个自定义title"
},
methods:{ // 这个 methods 属性中定义了当前Vue实例所有可用的方法
show:function () {
alert("提示框")
}
}
})
</script>
v-on 也可以使用语法糖：@ 上述代码可以简写成：
<input type="button" value="按钮" :title="myTitle + 'Aries101'" @click="show">
事件修饰符
在event.preventDefault()上也可以用Vue事件的修饰符来实现，在@绑定的事件后加小圆点“.”，在跟上一个后缀来使用修饰符。事件修饰符可以多个一起使用，Vue支持以下修饰符：
- .stop 阻止冒泡
- .prevent 阻止默认行为
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（而不是子元素）触发时触发回调
- .once 只触发依次，组件同样适用
在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：
- .enter
- .tab
- .delete（捕获“删除”和“退格”键）
- .esc
- .space
- .up
- .down
- .left
- .right
事件修饰符的使用：
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="div1Handler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题先百度</a>
<!-- 使用 .capture 实现捕获触发事件的机制。捕获事件，先执行最外层 再执行内层-->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="点击" @click="btnHandler">
</div>
<!-- 使用 .self 实现只有点击当前元素时，才会触发事件处理函数 -->
<div class="inner2" @click.self="div1Handler">
<input type="button" value="点击" @click="btnHandler">
</div>
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题先百度</a>
<!-- .stop 和 .self 区别：
.self 只会阻止自己身上的冒泡行为触发，不会真正阻止 冒泡的行为
当同时嵌套多层时，指定 .self 的不会触发冒泡，会绕过它执行上一层的冒泡事件
-->
</div>
<script>
// 创建 Vue 实例
let vm = new Vue({
el:'#app',
data:{},
methods:{
div1Handler() {
console.log("这是触发了 inner div的点击事件");
},
btnHandler() {
console.log("这是触发了 button 的点击事件");
},
linkClick() {
console.log("触发了链接的点击事件");
}
}
});
</script>
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
