VUE基础——内置指令

+ 操作内容文本类指令

       v-text                v-html                v-pre

v-html 与 v-text 的区别：

      v-html:可以解析标签  eg: <p v-html="<h1>我会变成h1标题标签的样式</h1>"></p>

      v-text:不可以解析标签  eg: <p v-text="<h1>我会带着h1标签一起打印出来</h1>"></p>

       跟之前的innerHTML与innerText是一样的

+ 操作属性  v-bind  指令 （简写为冒号）

      v-bind:属性名=属性值   ----- <a v-bind:href='url'>百度</a>

      简写   :属性名=属性值   ----- <a :href='url'>百度</a>

+ 操作样式  :class 和 :style

      vue对样式操作做了增强

      样式值：字符   ----- <p class="p1">操作样式字符</p>  ----- <p style="color:red;">

                     对象  { 样式:控制样式变量 } ----- <p v-bind:class="{'p1':isOk}">操作样式对象</p>

                     数组  [] ----- <p :class="['d1','d2']">操作样式数组</p>

+ 操作事件  v-on   简写 @

      v-on:事件类型=事件处理函数 ----- <btuton v-on:click="onAlert">确定1</btuton>

      简写    @事件类型=事件处理函数 ----- <button @click="onAlert">确定2</button>

+ 条件显示指令 v-if 和 v-show

+ 列表渲染指令 v-for

+ 表单处理   v-model 指令

CSS代码段

        .p1 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        .d1 {
            color: pink;
        }

        .d2 {
            background-color: blueviolet;
        }

        //解构 creatApp
        const { createApp } = Vue
        const root = {
            data() {
                return {
                    title: '指令--特殊属性',
                    message: 'v-html: <h1>我会变成h1标题标签的样式</h1>',
                    content: 'v-text: <h1>我会带着h1标签一起打印出来</h1>',
                    isOk: true,
                    num: 20,
                    url: 'http://www.baidu.com',
                    pic: 'https://img1.baidu.com/it/u=1400038329,623120965&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=448',
                    onLine:1,   //0 在线,1 隐身,2 离线
                    show:false,  //当show的值为true时会显示，为false时，则不会显示
                }
            },
            methods: {
                //自定义一个方法，方法名为onAlert
                onAlert() {
                    document.write('我是执行的onAlert方法')
                }
            },
            // 安装vscode插件 es6-string-html使模板括号有颜色
            //template:定义模板
            /*html*/
            template: `
                    <h2>{{ title }}</h2>
                    <p v-html="message"></p>
                    <p v-text="content"></p>
                    <p v-pre>{{ content }}</p>

                    <p>----操作内容-----</p>
                    <h2 v-pre>{{title}}</h2>
                    <p v-html="message"></p>
                    <p v-text="content"></p>

                    <p>----操作属性-----</p>
                    <a v-bind:href="url">百度</a>
                    <img :src="pic" alt="图片"/>
                    
                    <p>----操作样式-----</p>
                    <p class="p1">操作样式字符</p>
                    <p style="color:red;font-size:30px;">操作样式字符</p>
                    <img :src="pic" alt="图片" style="width:200px;"/>
                    <p v-bind:class="{'p1':isOk}">操作样式对象</p>
                    <p :class="['d1','d2']">操作样式数组</p>

                    <p>----操作事件-----</p>
                    <button v-on:click="onAlert">确定1</button>
                    <button @click="onAlert">确定2</button>

                    `
           
            // <p v-pre>{{num}}</p>  不会解析{{}}，打印结果：{{num}}
        }
        createApp(root).mount('#app')  //挂载