zoukankan      html  css  js  c++  java
  • vue 知识总结

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue study</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/vue.js"></script> 
        <script src="js/vueJson.js">
            //vue的数据信息很有必要在body的最顶端调用,因为之前是在后边调用的,但是一些判断if为false时就让他隐藏的逻辑,在还没加载到js的时候,会先出现那么几毫秒,也就是会出现闪一下的结果,所以放到前边容易解决这个问题
        </script>
    </head>
    <body>
        <div id="viewBox">
            <h3 class="block">第一个vue实例</h3>
                {{msg}}
            <h2>常用指令</h2>
            <div>
                <h3 class="block">v-model双向数据绑定</h3>
                <div class="info">它能轻松实现表单输入和应用状态之间的双向绑定。现在就去改变其中一个input吧。</div><br>
                <input type="text" v-model="model">
                <input type="text" v-model="model">
                <br>
                <div class="info">v-model监听输入和下拉,随时展现——input</div>
                <div>
                    <input type="text" v-model="modelTest" placeholder="请输入...">
                    <p>modelTest内的值是:<div class="info info-error">{{modelTest}}</div></p>
                </div>
                <div class="info">下拉select,随时展现</div>
                <div>
                    <select v-model="modelTest2">
                        <option disabled value="">请选择</option>
                        <option>苹果</option>
                        <option>香蕉</option>
                        <option>橘子</option>
                    </select>
                    <p>modelTest内的值是:<div class="info info-error">{{modelTest2}}</div></p>
                </div>
            </div>
            <div>
                <h3 class="block">v-bind:属性名 在dom元素上绑定属性</h3>
                <div class="info">只有你想不到,没有他绑不到,只要你想到的属性,都用它来绑上去吧!</div>    
                <div v-bind:title = "titleTxt">1、{{titleTxt}}</div>
                <div v-bind:title = "titleTest">2、文档中的bind案例,将时间对象Date()加载进来,并转成字符串形式,放到title里边了。——{{titleTest}}【看来,数据里边的变量,也支持加入原生js,混合成一个新的数据】</div>
                <div v-bind:style="bindStyle">3、我被绑定了style属性,用字符串的形式把所有的样式传进来了</div>
                <div v-bind:style="{color: divColor, fontSize: divFontSize + 'px', 'border-bottom-color': divBC}" style="border-bottom: 3px solid;">4、我绑定style,在标签内通过大括号绑定于自身,并把数据当做变量传进来。注意双引号里边的大括号不要丢掉。</div>
                <div v-bind:style="divStyle" style="border-bottom: 2px solid;">5、我绑定了一个json的样式对象,对象里边的数据都是变量、动态的,标签这里只用传入对象名字。也很清爽</div>
                <div class="info info-error">绑定class的应用,就是可以用来切换class进而切换状态的,在v-on:mouseover函数那里应用了,</div>
                <div class="info">可以字符串拼接、可以传入一个对象、可以和普通的class同时存在</div>
                <br>v-bind:class传入字符串拼接
                <p class="pDemo" v-for="item in pListId" v-bind:class="'list_'+ item">{{item}}</p>
                v-bind:class传入对象:
                <p v-bind:class="{boolean: true}">对象</p>
            </div>
            <div>
                <h3 class="block">v-if="variate" 根据条件展示元素的选项</h3>
                <div class="info"> variate = 布尔值对应的变量</div>
                <ul>
                    <li v-if="bool">bool是true,你看的到我。我还有个兄弟你看不到</li>
                    <li v-if="boolF">boolF是flase,你看的到我</li>
                </ul>
                <div class="info"> v-if 渲染一组代码</div>
                <template v-if="bool">
                    <h5>我是v-if的title</h5>
                    <p>我是v-if的body</p>
                    <a href="javascript:;">我是v-if的脚注</a>
                </template>
                <h3 class="block-child">v-else-if</h3>
                <p v-if="num === 3">if条件成立</p>
                <p v-else-if="num === 2">else-if条件成立</p>
                <p v-else>if和else-if的条件都不成立,else条件成立</p>
                <h3 class="block-child">v-else</h3>
                <div class="info">v-else 需要配合v-if合作完成.v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。</div>
                <p v-if="boolF">if条件成立,显示我了<a href="javascript:;">我是v-if里边的a标签</a></p>
                <p v-else>if条件不成立,显示else的结果<a href="javascript:;">我是v-else里边的a标签</a></p>
            </div>
            <div>
                <h3 class="block">v-for 循环  数组/Json对象</h3>
                <div class="info">数组中有value代表数值,也有$index做索引值</div>
                <ul>
                    <li v-for="value,index in arr" v-bind:key="value">值——"{{value}}",索引——"{{index}}"</li>
                </ul>
                <h3 class="block">v-for 循环  json</h3>
                <div class="info">json中有value代表数值,也有$index做索引值,还有$key代表键名,k、v也可以代表键名的对应值</div>
                <br><div class="info">遍历一维数组</div>
                <ul>
                    <li v-for="item in json" v-bind:key="item">值:{{item}}</li>
                </ul>
                <div class="info">遍历json【对象】</div>
                <ul>
                    <li v-for="(v,k) in json" :key="v">{{k}}—键名, {{v}}—value值
                    </li>
                </ul>
                <div class="info">遍历json(对象),获取索引值</div>
                <ul>
                    <li v-for="(name,key,index) in json" :key="name">(值、索引、键名){{name}}--{{index}}--{{key}}</li>
                </ul>
                <div class="info">遍历二维数组</div>
                <ul>
                    <li v-for="item in jsonSec" v-bind:value = "item.value" v-bind:key="item.value">{{item.value}}、{{item.text}}</li>
                </ul>
            </div>
            <div class="info">整数迭代</div>
            <div>
                <span v-for= "n in 10"> {{n}} </span>
            </div>
            <div>
                <h3 class="block">v-on:事件名 = "函数名" 监听交互,添加监听器 </h3>
                <div class="info">事件名:click、dblclick、mouseover、mouseout、mousedown、mouseup</div>
                <p v-if="bool" v-on:click="clickFun">点击我就惊奇了【v-on:命令点击】</p>
                <p v-if="bool" @click="clickFun()">点击我就惊奇了【@点击】</p>
                <p v-if="boolF" v-on:dblclick="dblClickFun">双击我就更惊奇了</p>
                <p v-on:mouseover="overFun" v-on:mouseout="outFun" style="display:inline-block;">鼠标经过我啊</p><br>
                <div class="overSpan" :class="className" v-if="boolF2">哈哈我来了</div>
                <div class="overSpan" v-bind:class="className" v-if="boolF2">哈哈我来了</div>
                <button v-on:mousedown="downFun" v-on:mouseup="upFun">点击看控制台</button>
            </div>
            <div>
                <h3 class="block">组件化模块 </h3>
                <div class="info">然实现了批量生产,但是生产的都是一样的。不能复用</div>
                <ol>
                    <todo-item></todo-item>
                    <todo-item></todo-item>
                    <todo-item></todo-item>
                    <todo-item></todo-item>
                </ol>
                <h3 class="block">组件化模块【传参】 </h3>
                <div class="info">传入参数数据,这样组件就可以重用了</div>
                <ol>
                    <todo-data 
                        v-for="item in groceryList" 
                        v-bind:todo="item" 
                        v-bind:key="item.id">
                        <!-- 在组件化模板中使用v-for的时候,v-bind:key="item.id" 是必须的 -->
                    </todo-data>
                </ol>
            </div>
            <div>
                <h3 class="block">v-once 一次性插值</h3>
                <div class="info">一次性插入,这个节点上所有插值再次动态更改数据不会更新</div>
                <p>普通节点上的数据展示:{{msgOnce}}</p>
                <p v-once>一次性属性所在节点上的:{{msgOnce}}</p>
                <button v-on:click="onceFun">更改msg数据</button>
            </div>
            <div>
                <h3 class="block">v-html 纯HTML、v-text 纯文本,</h3>
                <div class="info">v-html 输出真正的html。v-text不翻译标签直接输出</div>
                <p v-html="aHtml"> </p>
                <p v-text="aText"> </p>
            </div>
            <div>
                <h3 class="block">"插值——{ { javascript 表达式 } }"</h3>
                <div class="info info-border">运算符表达式 num + 1</div>
                <p>num+1 = {{num + 1}}</p>
                <div class="info info-border">三元表达式 ok?'YES'':'NO'</div>
                <p>{{bool? "bool现在是:true":"bool现在是:false"}}</p>
                <div class="info info-border">链式调用方法表达式 arrReverse.reverse().join("-")</div>
                <p>arr的length:{{arrReverse.length}},arr翻转:{{arrReverse.reverse().join("-")}}</p>
                <div class="info info-border">字符串拼接 v-bind:id="'list_'+ v"</div>
                <ol>
                    <li v-for="(key,index) in idAdd" v-bind:id="'list_'+ index">{{key}}-{{index}}</li>
                </ol>
            </div>
            <div>
                <h3 class="block">v-show 根据条件展示元素的选项</h3>
                <div class="info">同v-if一样,都是根据条件展示元素的选项。其核心是,切换元素的display,也就是说,不管显不显示他都会被渲染到html的dom结构中去,而if不会。if条件如果不成立,则if指令所在的元素将不会被渲染再dom中</div>
                <p v-show="bool">我是v-show成立的</p>
                <p v-show="boolF">我是v-show没有成立的,但是我依旧存在dom中,你在控制台、源代码处还能看到我哦</p>
                <p v-show="false">我是v-show没有成立的,等号右边除了传入变量也可以传入boolean值来判断是否显示</p>
            </div>
            <div>
                <h3 class="block">数组 变异方法</h3>
                <div class="info">它们也将会触发视图更新</div>
                <ol>
                    <li v-for="item in arrMethods">{{item}}</li>
                </ol>
            </div>
            <div>
                <h3 class="block">事件修饰符</h3>
                <div class="info">它们用于v-on:事件名之后,用点表示指令。修饰符也可以一次使用多个,可以串联。但是串联使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。</div>
                <p>v-on:click.stop.prevent = "函数名"</p>
                <ol>
                    <li v-for="item in eventMethods">{{item}}</li>
                </ol>
                <div class="info">键值修饰符:监听键盘事件时添加关键修饰符</div>
                <p>v-on:keyup.13 = "函数名"</p>
                <p>Vue 为最常用的按键提供了别名:</p>
                <ol>
                    <li v-for="item in keyMethods">{{item}}</li>
                </ol>
                <div style="color: red;">可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
                    <p style="font-size: 12px;">Vue.config.keyCodes.f1 = 112</p>
                </div>
            </div>
    </body>
    </html>
    window.onload = function(){
            // 创建一个组件化模板(就是你往里边传数据就行,他自动创建结构
                Vue.component("todo-item",{
                    template: "<li>我是组件化模板创建的</li>"
                });
                // 创建另一个可以传数据的组件模板.创建模板用的component就和function一样是固定写法,多个也要用这个单词,不要改变,不然不算一个函数,就好像你写function和function2的区别一样。
                Vue.component("todo-data",{
                    props: ["todo"],
                    template: "<li>{{todo.id}}、{{todo.text}}</li>"
                });
                new Vue({
                    el: "#viewBox",
                    data: {
                        modelTest: "",
                        modelTest2: "",
                        msg: "hello vue!", //字符串
                        msgOnce: "hello xing.org1",
                        aHtml: "<a href='#'>我可是纯正的a标签哦,如果不是v-html的帮忙,我的标签就解析不出来了拉!<br/>{{msg}}数据绑定被忽略了</a>",
                        aText: "<a href='#'>我也是纯正的a标签啊!用了v-text,就把我的标签符号当文本用了吗?<br/>{{msg}}数据绑定ye被忽略了</a>",
                        model: "vue实现数据的双向绑定",
                        num: 1, // 数字
                        bool: true, //布尔
                        boolF: false, 
                        boolF2: false, 
                        arr: ["我","是","for","循","环"], // 数组
                        arrReverse: ["h","e","l","l","o"], // 数组
                        idAdd: [1,2,3,4,5], // 数组
                        pListId: [1,2,3], // 数组
                        json: {"a":"1","b":"3"}, // json
                        jsonSec: [
                            {"value":"1","text":"hello"},
                            {"value":"2","text":"vueMan"}
                        ],
                        titleTxt: "我是绑定到标签title属性中的内容",
                        titleTest: '页面加载于 ' + new Date().toLocaleString(), //原生js方法代码,内置对象,加号链接, 
                        bindStyle: "padding: 10px 0;font-weight: bold;margin-top: 5px;color: #4488ff",  //绑定style
                        className: "",
                        groceryList: [
                            {id: 1, text: "苹果"},
                            {id: 2, text: "香蕉"},
                            {id: 3, text: "菠萝"}
                        ],
                        divColor: "blue",
                        divFontSize: 16,
                        divBC: "red",
                        divStyle: {
                            color: 'red',
                            fontSize: '18px',
                            'border-bottom-color': 'blue'
                        },
                        arrMethods: ["push()","pop()","shift()","unshift()","splice()","sort()","reverse()"],
                        eventMethods: [".stop:阻止单击事件冒泡",".prevent:阻止默认行为",".capture:使用事件捕获模式",".self:事件发生在自身时",".once:事件将只会触发一次"],
                        keyMethods: [".enter:回车键",".tab",".delete:删除或退格",".esc",".space",".up",".down",".left",".right"]
                    },
                    methods:{
                        clickFun: function(){
                            console.log(this.bool);
                            this.bool = false;
                            this.boolF = true; 
                        },
                        dblClickFun: function(){
                            this.bool = true;
                            // this.boolF = true;
                        },
                        overFun: function(){
                            this.boolF2 = true;
                        },
                        outFun: function(){
                            // this.boolF2 = false;
                            this.className = "outSpan";
                            console.log(this.className)
                        },
                        downFun: function(){
                            console.log("您已按下鼠标");
                        },
                        upFun: function(){
                            console.log("您已收起鼠标");
                        },
                        onceFun: function(){
                            console.log(this.msgOnce)
                            this.msgOnce = "hi, uh, what i should to say? hah,hello xing.org1,are you ok? how old are you? Nice to meet you!"
                        }
                    }
                })
            }
    
    vueJson.js
  • 相关阅读:
    滚动数组
    leetcode动态规划
    初中数学学习
    LCS最长公共子序列
    Help Jimmy
    IntelliJ IDEA 设置和查看内存使用
    无法嵌入互操作类型“ApplicationClass”。请改用适用的接口
    代码重构与单元测试——重构6:使用“多态”取代条件表达式(九)
    一个屌丝程序猿的人生(一百二十六)
    一个屌丝程序猿的人生(一百二十五)
  • 原文地址:https://www.cnblogs.com/chaihtml/p/11866752.html
Copyright © 2011-2022 走看看