Vue笔记-第一天

最新推荐文章于 2023-05-29 11:36:41 发布

lilianggui

最新推荐文章于 2023-05-29 11:36:41 发布

阅读量172

点赞数

分类专栏： vuejs 文章标签： vue js 前端

本文链接：https://blog.csdn.net/lilianggui/article/details/102989937

版权

vuejs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

如果没有template，会找el绑定的元素
template存在，则el绑定的元素中的内容无效
template只能有一个根节点，多个根节点时，第一个根节点以后的节点无效
v-html解释定义好的html到指定的元素中，如果目标元素中原先就存在值，则会覆盖原来的值
v-html绑定的html中的{{}}，vue相关指令等无效
v-text不会解释html，只会原样输出
指令的值可以时数据data中的变量，也是常量，使用引号表示，如<p v-html="'<h3>标题3</h3>'"></p>
v-bind:可以绑定html的原声属性，如class，style，id，value等，v-bind可以简写成:
v-bind绑定style这类多个值的属性时可以绑定一个对象，如v-bind:style="{'font-size': '40px', 'line-height': '40px'}"
v-bind绑定class时可以利用对象中key的真假来确定是否拥有某些class，如v-bind:class="{'red': cls, 'bgC': cls1}"，其中如果cls为真，则拥有red这个class
{{}}中可以使用JavaScript的一些简单表达式，如：

<p>
{{1+1}}<br>
{{cls ? '真的' : '假的'}}<br>
{{msg.split(' ')[0]}}<br>
</p>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <style>
        .red{
            color: red;
        }
        .bgC{
            background-color: #cccccc;
        }
    </style>
</head>
<body>
    <div id="app">
    </div>
    <script>
        new Vue({
            el: '#app',
            template: `
                <div>
                    <p>{{msg}}</p>
                    <p v-html="'<h3>标题3</h3>'"></p>
                    <p v-text="html"></p>
                    <p v-bind:class="{'red': cls, 'bgC': cls1}" :id="'color_id'"
                    v-bind:style="{'font-size': '20px', 'line-height': '40px', height: '40px'}">我是啥颜色啊</p>
                    <p>
                        {{1+1}}<br>
                        {{cls ? '真的' : '假的'}}<br>
                        {{msg.split(' ')[0]}}<br>
                    </p>
                </div>
            `,
            data: function(){
                return {
                    msg: 'Hello Vue',
                    html: '<h2>我是标题</h2>',
                    cls: false,
                    cls1: true
                }
            }
        });
    </script>
</body>
</html>