Vue.js - Day2

最新推荐文章于 2022-04-09 20:57:13 发布

TricSuMer

最新推荐文章于 2022-04-09 20:57:13 发布

阅读量221

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/u010546138/article/details/70201813

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html模板 — 基于DOM,可解析的有效的HTML(由HTML标签组成)

插值

文本：使用 “Mustcache” 语法（双大括号）{{ value }} — 替换实例上的属性值，当值改变时，插值内容处会自动更新

    <div>{{ message }}</div>

原生的html：双大括号输出的是文本，不会解析html

<div id="demo" :>
    <div>{{ html }}</div> <!-- 会输出<div>Hello World!</div>,被当成文本了,没有被解析 -->
</div>

<div id="demo">
    <div v-html="html"></div> <!-- 仅当span标签加上v-html属性时才不会将html(<div>Hello World</div>) 解析为文本 -->
    }
</div>

let obj = {
    html: "<div>Hello World</div>",
}
var vm = new Vue({
    el: "#demo",
    data: obj,
});

属性：使用v-bind进行绑定，可以响应变化

<div id="demo" :custom="abc"> <!-- 输出<div id="demo" custom="1"></div> -->
    <div>{{ message }}</div>
</div>

let obj = {
    abc: 1,
}
var vm = new Vue({
    el: "#demo",
    data: obj,
});

使用javascript表达式：写简单的表达式

<div id="demo">
    {{ 1+2 }} <!-- 可以进行简单运算,会输出3 -->
    {{ true ? 'yes' : 'no' }} <!-- 支持三目运算,输出 yes -->
    {{ if( xxx ){ xxx } }} <!-- 不支持这样的 -->
    <div v-html="html"></div> <!-- 仅当span标签加上v-html属性时才不会将html(<div>Hello World</div>) 解析为文本 -->
    }
</div>

template字符串
1. template选项对象的属性
2. 模板会替换挂载的元素,挂载元素的内容豆浆被忽略
3. 根节点只能有一个

<div id="demo">
    <span>Old Element</span>
</div>
<!-- 1.message也会被解析 -->
<!-- 2.整个id为demo的div都会被str里的内容替换掉,同时 {{message}} 也会被解析 -->

let obj = {
    message: 'i am message',

}

var str = '<div>template,{{ message }}</div><span>Hello</span>'; // 3. 根节点只能有一个,所以不会被解析,同时会报错
var str = '<div>template,{{ message }},<span>Hello</span></div>'; // 这样可以被解析

var vm = new Vue({
    el: "#demo",
    template: str,
});

将html结构写在一对script标签中,设置type=”x-template”,但是没办法跨文件使用,仅限在一个文件中使用

<!-- 将代码片段放在 script 标签中 -->
<script type="x-template" id="temp">    
    <div>
        template,
        {message},
        <span>Hello</span>
    </div>
</script>

let obj = {
    message: 'i am message',
}
var vm = new Vue({
    el: "#demo",
    template: "#temp",
});

模板-render函数
render 选项对象属性
createElement (标签名,[数据对象],子元素); Tips:子元素为文本或数组
数据对象属性
- class: {}, // 绑定class,和 ‘v-bind:class’ 一样的API
- style: {}, // 绑定样式,和 ‘v-bind:style’ 一样的API
- attrs: {}, // 添加行间属性
- domProps: {}, // DOM元素属性
- on: {}, // 绑定事件
  以下与组件有关,先了解有这些
- nativeOn: {}, // 监听原生事件
- directives: {}, // 自定义指令
- scopedSlots: {}, // slot作用域
- slot: {}, // 定义slot名称
- key:”key”, // 给元素添加唯一标识
- ref:”ref”, // 引用信息
实例理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        .bg{ background:yellow; }
        .ft{font-size:12px;}
    </style>
</head>
<body>
    <div id="demo" class="ft" :class="{bg:addClass}" >XXXXXXXXXXXXXX</div>  <!-- 仅当addClass为true时,才会增加bg类,与原生的class共存 -->
    <script>
        // 数据
        let obj = {
            addClass: true
        }
        var vm = new Vue({
            el: "#demo",
            data: obj,
            render (createElement) {    // createElement (标签名,[数据对象],子元素);
                return createElement (
                    "ul",   // 第一个参数 -- 标签名 
                    {
                        class: {
                            bg: true,   // 格式 类名: 
                        },
                        style: {
                            fontSize: "50px",
                        },
                        attrs: {
                            atr: "test",
                        },
                        domProps: {
                            innerHTML: "<li>我来自domProps</li>",  // 下面的[数据对象]将会被替换
                        },
                    },
                    [
                        createElement("li",1),
                        createElement("li",2),
                        createElement("li",3),
                    ]
                )
            }
        });
    </script>
</body>
</html>