使用Vue开发项目(一)

迈不过友情╰ 2022-05-28 12:52 182阅读 0赞

## Vue官方文档 ##

[Vue.js][]

## 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模板 ###

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>

[Vue.js]: https://vuejs.bootcss.com/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88