Vue_Study01

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 标签的默认跳转等。