使用Vue开发项目(一)

Vue官方文档

Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>

</head>
<body>
    <!--模板-->
    <div id="demo">
        <input type="text" v-model="message" />
        <p>{{message}}</p>
    </div>
    <script>
        //数据
        let data = {
            message:"hello,Vue!"
        }

        //Vm实例
        var vm = new Vue({
            el:"#demo",  //挂载元素
            data:data
        });

    </script>
</body>


</html>

Vue中的内置指令

v-bind 动态的绑定数据简写为： v-on 绑定事件监听器，简写为@

v-text 更新数据，会覆盖已有结构 v-html 可以解析数据中html结构

v-show 根据值的真假，切换元素的display属性 v-if 根据值的真假，切换元素会被销毁重建

v-else-if 多条件判断，为真则渲染 v-else 条件都不符合渲染

v-for 基于源数据多次渲染元素或模板 v-model 在表单控件元素上创建双向数据绑定

v-pre 跳过元素和子元素的编译过程 v-once 只渲染一次，随后数据更新不重新渲染

v-cloak 隐藏未编译的Mustache语法，css中设置[v-cloak]{ display:node }

模板

html模板

基于DOM的模板，模板都是可解析的有效的HTML

插值

文本：使用“Mustache”语法（双大括号）{{ value }}

作用：替换实例上的属性值，当值改变时，插值内容处会自动更新

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

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

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

字符串模板

template选项对象的属性

模板将会替换挂载的元素，挂载元素的内容都将被忽略

根节点只能有一个

将html结构写在一对script标签中，设置type=“x-template”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>

</head>
<body>
    <!--模板-->
    <div id="demo">
        <span>miaov ke tang</span>
    </div>
    <script type="x-template" id="temp">
        
    </script>
    <script>
        //数据
        let obj = {
            html:"<div>hello,miaov</div>",
            abc:1
        };

        var str = `<div>hello,{{abc}},
        <span>miaov</span>
        </div>`;

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

    </script>
</body>

</html>

模板-render函数

render函数

render 选项对象的属性

createElement(标签名，[数据对象]，子元素)；

子元素为文本或数组

数据对象属性

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>Title</title>
    <style type="text/css">
        .bg {
            background: yellow;
        }
    </style>
    <script src="./vue.js"></script> //需要自己引入vue.js

</head>
<body>
    <!--模板-->
    <div id="demo"></div>
    <script>
        //数据
        let obj = {
            html:"<div>hello,miaov</div>",
            abc:1
        };

        var vm = new Vue({
            el:"#demo",
            data:obj,
            render(createElement){
                var obj = createElement(
                    "ul",
                    {
                        class: {
                            bg:true
                        },
                        style:{
                            fontSize:"50px"
                        },
                        attrs:{
                            abc:"miaov"
                        },
                        domProps:{
                            /*innerHTML:"<li>我是html</li>" */
                        }
                    },
                    [
                        createElement("li",1),
                        createElement("li",2),
                        createElement("li",3)
                    ]
                );

                console.log( obj );

                return obj;
            }
        });

    </script>
</body>


</html>

秒客网