Vue的基础用法（1）

什么是Vue

Vue是一个遵循MVVM模式的渐进式框架

Vue是一套用于构建用户界面的渐进式的JavaScript框架。

特点：

Vue比较易学，体积更小，灵活，高效

Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库

Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对 应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起 来，通过对数据的操作就可以完成对页面视图的渲染

数据渲染需要引入vue

网址：Vue.js - 渐进式 JavaScript 框架 | Vue.js

数据绑定

<!-- 视图层 -->
<div id="app">
{{ msg }}
</div>

Vue语法

data：所有要展示的数据都要放在data属性中

el：指定了元素的挂载点

// 1. 创建一个Vue实例
const vm = new Vue({
el: "#app", // 指定了数据所要渲染的视图
// 数据层
data: {
msg: "hello world"
}
});

指令

Vue中的指令是一个特殊的HTML标签属性，以 v- 开头，它可以绑定一个表达式，并且把一些特性 作用到DOM结构上去 可以把Vue中的指令理解为是对HMTL标签属性的扩展

v-cloak   作用：防止页面加载时出现闪烁的问题

v-text   v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 v-text指令不解析HTML标签 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响 数据对象的值

v-html

用法和v-text 相似 但是他可以将HTML片段填充到标签中 可能有安全问题, 一般只在可信任内容上使用 v-html ，永不用在用户提交的内容上 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当 html标签解析后输出。

v-pre

显示原始信息跳过编译过程 跳过这个元素和它的子元素的编译过程。 一些静态的内容不需要编译加这个指令可以加快渲染

v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

v-on（v-on这个指令是用来绑定事件的,可以简写成@）

v-show

v-show用来控制元素的显示与隐藏，如果值为true，元素显示；值为false，元素隐藏

 双向数据绑定

v-model指令

v-model实现数据和视图的双向绑定，即数据变了，视图会更新；视图更新了，数据会改变 注意：v-model指令只能用在表单元素上

Vue中的事件

vue中使用v-on指令来绑定事件，可以简写成@ 在vue中所有的方法（函数）都要写在 methods 属性中

1.传参

<div id="app">
<button @click="fn">点击</button>
</div>
<script>
const vm = new Vue({
el: "#app",
methods: {
fn(ev) { // 事件处理函数
// ev: 事件对象
console.log(ev)
}
}
})
</script>

 如果不传参数，事件处理函数的第一个参数就是事件对象

<div id="app">
<button @click="fn(3, 4)">点击</button>
</div>
<script>
const vm = new Vue({
el: "#app",
methods: {
fn(a, b) {
alert(a+b)
}
}
})
</script>

如果传递参数，事件处理函数的最后一个参数就是事件对象，需要使用$event来接收

<div id="app">
<button @click="fn(3, 4, $event)">点击</button>
6 修饰符
6.1 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见
的需求。
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表示的 比如v-on:click.stop阻止事件冒泡
6.2 按键修饰符
在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许
为 v-on 在监听键盘事件时添加按键修饰符
</div>
<script>
const vm = new Vue({
el: "#app",
methods: {
fn(a, b, ev) {
console.log(a, b, ev)
}
}
})
</script>

事件修饰符

stop阻止事件冒泡

prevent不在重新加载事件