Vue_Study入门一
Get新知识:
vue 的基本使用步骤
- 需要提供标签用于填充数据
- 引入vue.js 库文件
- 可以使用vue 的语法做功能实现
- 将vue 提供的数据填充标签中
入门案例：
插值表达式的简单使用。形如 {{ xxx }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue_demo</title>
</head>
<body>
<div id="app">
<div>{{ msg }}</div>
</div>
</body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
var temp_vue = new Vue({
el: "#app",
data: {
msg: "hello vue"
}
});
</script>
</html>
vue v-cloak 指令的用法
- 提供样式
[v-cloak]{
display: none;
}
- 在插值表达式所在的标签中添加v-cloak 指令，类似属性
因为使用插值表达式 会出现闪动的的情况，闪动 是指在页面刷新快速的情况下出现的页面显示{{ xxx }} 这样的数值 再显示实际数据的情况，所以使用v-cloak 指令 就可以避免这种情况，原理是因为 先通过样式隐藏内容，然后在内存中替换值，替换好之后显示最终的值。
vue 数据绑定的指令使用
包含有三个指令的使用，
v-text 优先级高于插值表达式，并且不会出现闪动的问题，
v-html 直接填充html片段，不是普通的字符串，该指令不能随意使用只能在确保数据来源是可信任，数据的安全的情况下使用
v-pre 不进行编译，就是直线显示原始字符串，如 {{xxx}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue_demo3</title>
</head>
<body>
<div id="app3">
<div v-text="msg1">{{msg2}}</div>
<div v-html="msg3"></div>
<div v-pre>{{v-pre}}</div>
</div>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript">
var temp_vue = new Vue({
el: "#app3",
data: {
msg1: "v-text test",
msg2: "v-text test2",
msg3: "<h1>html</h1>"
}
});
</script>
</body>
</html>
vue 数据响应式
一般情况下，插值表达式，数据绑定都是属于数据响应式的，即修改填充的数据值，页面及时响应。而使用了 v-once 指令之后，就不会及时响应，即填充的数据值之后在初始的时候变化一次，之后就不会变化。
vue 数据双边数据绑定
数据双边绑定可以做到 页面填充数据 和 元素的值的相互影响，当页面填充数据变换时元素的值也会随之变化，当元素的之变化页面填充数据也会变化。这通过 v-model 指令来实现。
vue 事件绑定
事件处理是界面进行用户交互的基础，vue 中通过 v-on 指令绑定事件，可以是直接的一段简单的处理逻辑代码，也可以是处理函数，处理函数中可以书写较为复杂的逻辑处理代码，使用最多最常见的就是点击事件。
vue 事件传事件本身参数
vue 事件的处理函数，可以传递参数，不仅可以传递普通的数值参数，也可以传递事件 event 参数，在标签 内 @click=“handle(1, $event)” 这样使用即可。
vue 事件修饰符
通过stop 阻止冒泡事件，即在默认情况下子级出发出发了事件后，父级的事件也会被触发，但通过stop 修饰符，可以避免该种情况。
通过prevent 修饰符可以阻止 元素本身的事件，如 a 标签的默认跳转等。
- 点赞
- 收藏
- 关注作者
评论（0）