hualinux 进阶 vue 1.5：vue命令（一）数据、事件和方法

<div id="root">
    <h2>hello {{msg}}</h2>
    <p>{{t1}}</p>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg: "vue",
            t1: '这是我第一个vue'
        }
    })
</script>

运行结果：

1.2 v-text 命令

1.2.1 说明

我们也可以使用 v-text命令

预期：string
详细：

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

示例：
<span v-text="msg"></span>

<span>{{msg}}</span>

参考：数据绑定语法 - 插值

1.2.2 例子

<body>

<div id="root">
    <h2 v-text="msg">这是标题</h2>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg: "<u>vue</u>"
        }
    })
</script>

</body>

运行效果：

PS: v-text="msg" 接的是表达式，其中"msg"表示data中的msg，如果要接字符串，加单引号，即可

使用vue系统的东西，就可以调用它系统内的数据了。就像springBoot，你把对象放在托管容器中，这样你就可以使用它的注解。

理解：v-text使用的是vue系统自己的命令，默认会去vue实例的data参数对象中查找相关的成员。如果找不到会不显示，空白，使用vue调试工具会报警告

1.3 使用v-html命令

1.3.1 说明

数据显示也可以使用Vue的v-html命令

预期：string
详细：

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。

1.3.2 例子

把上面的v-text换面v-html

<div id="root">
    <h2 v-html="msg">这是标题</h2>
</div>

运行结果如下：发现字符串中里面的html标签被解析了！

二、事件

2.1 模板v-on指令

使用事件我们可以使用模板指令v-on

缩写：@
预期：Function | Inline Statement | Object
参数：event
修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法：

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

2.2 例子

<body>
    <div id="root">
        <p v-on:click="t1">hello {{msg}}</p>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "vue",
            },
            methods: {
                t1: function (){alert('这是我第一个vue')}
            }
        })
    </script>
</body>

运行效果：点一下文字，则会弹出一个对话框。

2.3 例2

上面的例1如果，我不需要弹出东西，而是修改内容呢，很简单使用this命令

<body>
    <div id="root">
        <p v-on:click="t1">hello {{msg}}</p>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "vue",
            },
            methods: {
                //this.msg完整写法this.$data.msg
                //具体可以看 https://cn.vuejs.org/v2/api/#vm-data
                t1: function (){ this.msg="这是我第一个vue"}
            }
        })
    </script>
</body>

运行结果

三、自定义事件（学完后回看）

3.1 说明

关于自定义事件，可以看vue官网的自定义事件，也可以看菜鸟教程的自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

可以在子组件上创建自定义事件，格式

<子组件标签 @<自定义事件名=”<调用方法名>”>>

3.2 例子

比如，我创建一个子组件是添加我写的文档，添加完成之后，点击列表中的字段自动添加“（hualinux）”，表示是hualinux写的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myvue</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="docName"/>
        <button v-on:click="myClick">提交</button>
    </div>
    <ul>
        <!--   @add-author 为我自定义的事件，点击自动添加     -->
        <todo-item v-for="(item,index) of list" :key="index"
                   :content="item" :index="index" @add-author="addHualinux" style="list-style: none"></todo-item>
    </ul>
</div>

<script>
    Vue.component('todo-item', {
        props: ['content','index'],
        template: '<li @click="liClick" >{{content}}</li>',
        methods: {
            liClick: function () {
                // 调用事件，并传给参数给 add-author对应的方法，这里是addHualinux
                this.$emit('add-author', this.index)
            }
        }
    })

    new Vue({
        el: "#root",
        data: {
            docName: '',
            list: []
        },
        methods: {
            myClick: function (){
                this.list.push(this.docName)
                this.docName=''
            },
            addHualinux: function (index){
                const newName= this.list[index]+"(hualinux)"
                this.list.splice(index,1, newName);
            }

        }
    })
</script>

</body>
</html>

运行效果：