zoukankan html css js c++ java

Vue之指令和绑定

一、v-once指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
<div id="app">
    <input type="text" v-model="mymsg">
    <!--只有v-once 加上就是初始值值一样也式不能进行修改的 只有自己=手动修改才可以-->
    <input type="text" v-model="mymsg" v-once >

    <hr>
    <p>{{ mymsg }}</p>

    <!--加上 同上 单独使用-->
    <p v-once>{{ mymsg }}</p>
</div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            mymsg:'我是初始值',
        }

    })
</script>
</html>

二、v-cloak(了解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>
    <style>
// 方法一
        /*样式先进行隐藏 不展示 目的: 在添加大量样式的时候不进行样式展示 >>> 闪烁事件*/
        [v-cloak]{
            display: none;

        }
    </style> 
方法二是 先加载页面

<script src="js/vue.js"></script>

</head> <body> <div id="app" v-cloak> <p>{{ }}</p> <p>{{ }}</p> <p>{{ }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', }) </script> </html>

v-cloak: 防止闪烁

三、条件指令

true 的话会将两个都进行展示

普通的点击绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

    <style>
        /*操作图表样式 这里是分开的来写了*/
        .box{
             400px;
            height: 400px;
            float: left;
            margin: 10px;

        }
        /*操作类的的属性的颜色*/
        .red{
            background-color: red;

        }
        .yye{
            background-color: yellow;

        }
        .blue{
            background-color: blue;

        }
        .active{background-color: deeppink}

    </style>

</head>
<body>
    <div id="app">
        <!--v-if='变量' 一般变量是布尔值-->
        <!--v-else-if='变量'-->
        <!--v-else-->
        <!--一组分支，只要上成立 分支会将下方的所有分支进行屏蔽 -->
        <!--else 是上面了两个都不满足才会走下面的else-->
        <!---->
        <p v-if="0">if条件成立</p>
        <p v-else-if="1">else-if条件成立</p>
        <p v-else>else最后</p>

        <div class="yyy">

            <p>
                <button @click="changeBox('redBox')" :class="{active: showName=='redBox'}">红</button>
                <button @click="changeBox('yyeBox')" :class="{active: showName=='yyeBox'}">黄</button>
                <button @click="changeBox('blueBox')" :class="{active: showName=='blueBox'}">蓝</button>
            </p>

            <!--条件判断点击哪一个 哪一个就展示页面-->
            <div class="box red" v-if="showName == 'redBox'"></div>
            <div class="box yye" v-else-if="showName == 'yyeBox'"></div>
            <div class="box blue" v-else></div>
        </div>


    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            showName:'',

        },
        // 点击事件 方法
        methods: {
            changeBox(name) {
                this.showName=name;
            }
        }

    })
</script>
</html>

三元表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

    <style>
        /*操作图表样式 这里是分开的来写了*/
        .box{
             400px;
            height: 400px;
            float: left;
            margin: 10px;

        }
        /*操作类的的属性的颜色*/
        .red{
            background-color: red;

        }
        .yye{
            background-color: yellow;

        }
        .blue{
            background-color: blue;

        }
        .active{background-color: deeppink}

    </style>

</head>
<body>
    <div id="app">
        <!--v-if='变量' 一般变量是布尔值-->
        <!--v-else-if='变量'-->
        <!--v-else-->
        <!--一组分支，只要上成立 分支会将下方的所有分支进行屏蔽 -->
        <!--else 是上面了两个都不满足才会走下面的else-->
        <!---->
        <!--<p v-if="0">if条件成立</p>-->
        <!--<p v-else-if="1">else-if条件成立</p>-->
        <!--<p v-else>else最后</p>-->

        <div class="yyy">

            <!--<p>-->
                <!--<button @click="changeBox('redBox')" :class="{active: showName=='redBox'}">红</button>-->
                <!--<button @click="changeBox('yyeBox')" :class="{active: showName=='yyeBox'}">黄</button>-->
                <!--<button @click="changeBox('blueBox')" :class="{active: showName=='blueBox'}">蓝</button>-->
            <!--</p>-->
            <p >
                <button @click="changeBox('redBox')"  :class="showName == 'redBox' ? 'active' : ''">红</button>
                <button @click="changeBox('yyeBox')"  :class="showName == 'yyeBox' ? 'active' : ''">黄</button>  刚才这里出现无敌的BUG 其实就中文的符号 '' 区别而已''  整得半天
                <button @click="changeBox('blueBox')" :class="showName == 'blueBox' ? 'active' : ''">蓝</button>
            </p>

            <!--条件判断点击哪一个 哪一个就展示页面-->
            <div class="box red" v-if="showName == 'redBox'"></div>
            <div class="box yye" v-else-if="showName == 'yyeBox'"></div>
            <div class="box blue" v-else></div>
        </div>


    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            showName:'redBox',

        },
        // 点击事件 方法
        methods: {
            changeBox(name) {
                this.showName=name;
            }
        }

    })
</script>
</html>

四、v-pre 指令（了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
    <p>{{msg}}</p>

        <p v-pre>
            {{ msg}}
            // v-pre 指令可以在vue控制范围内 行成局部的vue不可控制区域
            也就是不会渲染 而是原义进行显示
            <span v-if="xixixi"></span>
        </p>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'message'
        }

    })
</script>
</html>

五、循环指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
        (1)遍历字符串
    <p>{{str}}</p>
        <!--只能索引取值不能进行切片-->
     <p>{{str[1]}}</p>
        <div>
            <!--v-for ="循环语句" 底层原理进行封装-->
            <span v-for="i in str">{{i }}</span>

        </div>
        <!--针对循环遍历的标签,通过会提供key属性来优化渲染速度 key 必须是唯一 (key可以不用提供)-->
        <div v-for="(i,index) in str" :key="i+index">{{i}} {{index}}</div>

        (2)遍历数组
        <!--元素和索引足以位置-->
        <div v-for="(i, index) in list1"> {{index}} {{i}} </div>

        （3）字典
        key：value

        <div v-for="(s,i) in dic">{{i}}:{{s}} </div>
        <div v-for="(c,k,i) in dic">  {{c}} {{k}}:{{i}} </div>
        koko name:0
        18 age:1
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            str:'快乐的压缩123adc',
            list1:[1,2,3,4,8,6],
            dic:{'name':'koko','age':18}
        }

    })
</script>
</html>

六、todolist留言板留言案chc列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>
    <style>
        li:hover{
            color: red;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div id="app">
        <p>
            <!--（1）input 框绑定事件-->
            <input type="text" v-model="userMsg">
            <!--(2)留言按钮绑定点击事件-->
            <button type="button" @click="sendMsg">留言</button>
        </p>
        <ul>
            <!--列变组 放多i个值 删除 绑定删除点击事件-->
            <li v-for="(msg,index) in msgs" @click="deleteMsg(index)">
                <!--渲染的留言的信息-->
                {{msg}}
            </li>
        </ul>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
    data:{
        userMsg:'', // 用户写入的留言 初始值为空
            // 赋值 取值 反序列化 s所有的留言
        msgs:localStorage.msgs ? JSON.parse(localStorage.msgs): [],

    },
        methods:{
            sendMsg(){
                // 开始留言点击事件
                // 尾部增加 this.msgs.push(this.userMsg)；
                // 开头位置增加 this.msgs.unshift(this.userMsg);
                // 赋值变量 >>> msgs 变量容器
                 let userMsg = this.userMsg;
                 // 判断是否输入空值
                if (userMsg){
                    this.msgs.unshift(userMsg); // 渲染给页面
                    // 同步到数据库
                    localStorage.msgs = JSON.stringify(this.msgs);
                     this.userMsg='';


                }

            },
            // 删除留言 也是在方法下面进行操作

            deleteMsg(index){
                // 开始索引 操作长度 操作的结果们
                this.msgs.splice(index,1)

            }

        }

    })
</script>
</html>

七、实例成员-插值表达式符号（了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
        {{123546}}
        {[msg]}
        + msg +
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'123'
        },
        delimiters:['{[',']}']


    })
</script>
</html>

注意的是

  delimiters:['{[',']}']  外面套的是一个列表 用逗号分隔开 是咧成员符号只要

     {{123546}}
        {[msg]}
        + msg +
不配配或者不相同就行了 就不会帮我们解析 按照愿意字符串进行 渲染 可以结合的django 的语法去做模板渲染值

八、计算属性（compute）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
        <!--// methon函数绑定-->
        <p @click="f1">{{num}}</p>



        <p>十位：{{parseInt(num/10)}}</p>  取整
        <p>各位：{{num%10}}</p>  取余
        <hr>
        一个变量的值依赖多个变量，且依赖的任意一个变量发生改变，该变量都会改变
        十位：<input type="number" v-model="shi_wei" min="0" max="9">
        各位：<input type="number" v-model="ge_wei" min="0"  max="9">
        结果：<b>{{ shi_wei*10 + +ge_wei }}</b>
        结果：<b>{{result}}</b>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
             num:99,
        shi_wei:'', // 初始值
        ge_wei:'', // 初始值
        },
        methods:{
            f1(){
                this.num -=3;
            }
        },
        // 1) computed是用来声明 方法属性 的
        // 2) 声明的方法属性不能在data中重复定义
        // 3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
        computed:{
            result(){
                return this.shi_wei*10 + +this.ge_wei //+this.ge_wei  ”+“是转成数字
            }
        }


    })
</script>
</html>

九、属性监听（wach）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
        <!--多个变量的值依赖一个变量,改变量发生改变,所有依赖的值都会发生改变-->
        <!--测试点击事件-->
        <p @click="f1">{{num}}</p>
        <p>十位:{{shi}}</p>
        <p>个位:{{ge}}</p>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:99,
            shi:0,
            ge:0,

        },
        // 方法:
        methods:{
            f1(){
                this.num -=3;
            }

        },
        watch:{
            num(){
                this.shi = parseInt(this.num / 10);
                this.ge = this.num % 10;
            }
        }
    })
</script>
</html>

计算和监听案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
        姓:<input type="text" v-model="fName">
        名:<input type="text" v-model="lName">
        姓名:<b>{{fuName}}</b>

        <hr>
        <!--监听其实就是拆分-->
        姓名:<input type="text" v-model="fullName">
           姓:  <b>{{firstName}}</b>
           名:  <b>{{lastName}}</b>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            fName:'', // 初始值
            lName:'', //
            fullName:'',
            firstName:'',
            lastName:'',

        },
        computed: {
            fuName(){
                // 组合式  返回输入的 姓 + 名 = 名字
                return this.fName + this.lName;

            }
        },
        watch:{
            fullName(){
                nameArr = this.fullName.split('');
                console.log(nameArr);
                this.firstName = nameArr[0];
                this.lastName = nameArr[1];
            }
        }

    })
</script>
</html>

十、组件

// 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
// 2) 分组分为根组件、全局组件与局部组件
//      根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件
//      全局组件：不用注册，就可以成为任何一个组件的子组件
//      局部组件：必须注册，才可以成为注册该局部组件的子组件
// 3) 每一个组件都有自身的html结构，css样式，js逻辑
//      每一个组件其实都有自己的template，就是用来标识自己html结构的
//      template模板中有且只有一个根标签
//      根组件一般不提供template，就由挂载点的真实DOM提供html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>

</head>
<body>
    <div id="app">
      

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'mymessge',
            c1:'red'

        },
        template:`
        <div :style="{color:c1}" @click="fn">{{msg}} {{msg}}</div>`
        ,methods:{
            fn(){
                // alter(this.msg)
            }
        }
    })
</script>
</html>

　　10.1 局部组件

  // 创建局部组件
    // 1) 首先创建局部组件template模板
    // 2)在父组件中注册改局部组件
    // 3)在父组件的template 模板中渲染该局部组件

需要注意的是:必须将我们局部组件进行注册 >>> 在原父组件实列对象进行注册注册模板的key不能写驼峰体推荐命名中划线然后将注册的组件template模板渲染到父组件标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>
    <style>
        .box{
            box-shadow: 0 3px 5px 0 gold;
             240px;
            height: 300px;
            text-align: center;
            padding: 10px 0;
            margin: 5px;
             float: left;
        }
        .box img {
            200px;
            height: 220px;
        }

    </style>

</head>
<body>
    <div id="app">
        <!--这里作为局部模板的展示 但是必须和components: 注册的可以一致 而且推荐使用中划线 不能解析驼峰体-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    // 创建局部组件
    // 1) 说先创建局部组件template模板
    // 2)在父组件中注册改局部组件
    // 3)在父组件的template 模板中渲染该局部组件

    let localTag = {
        template:`
        <div class="box">
        <img src="img/111.jpg" alt="">
        <h3>样板</h3>
        <p>初步样式</p>
         </div>
        `
    };


    new Vue({
        el:'#app',
        components:{
            // 这也是个坑啊
            'local-tag':localTag,
        }

    })
</script>
</html>

　　10.2 全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>
<style>
        .box{
            box-shadow: 0 3px 5px 0 gold;
             240px;
            height: 300px;
            text-align: center;
            padding: 10px 0;
            margin: 5px;
             float: left;
        }
        .box img {
            200px;
            height: 220px;
        }

    </style>
</head>
<body>
    <div id="app">
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>

</body>
<script src="js/vue.js"></script>
<script>

    // 全局组件不用进行注册
    // 1.创建全局组件
    // 2.直接将template
    Vue.component('global-tag',{
        // 写
        template:`
        <div class="box" @click="action">
        <img src="img/111.jpg" alt="">
        <h3>样式</h3>
        <p>适用样式❤{{num}}</p>



</div>
`,
        data(){
            // 应用data :function() 返回数字
            return {
                num:0
            }
        },
        methods:{
            // 变量名 函数名  数据属性和方法都是在我们的全局组件中哦
            action(){
                this.num ++;

            }

        }



    });




    new Vue({
        el:'#app',




    })
</script>
</html>

重点解析组件:

十一、组件交互-父传子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之模板操作二</title>
     <style>
        .info {
            text-align: center;
             200px;
            padding: 3px;
            box-shadow: 0 3px 5px 0 pink;
            float: left;
            margin: 5px;
        }
        .info img {
             200px;
            height: 220px;
        }
    </style>
</head>
<body>
    <div id="app">
        <info v-for="info in infos " :key="info.image" :myinfo="info"></info>
    </div>

</body>
<script src="js/vue.js"></script>
<script>

    // 先定义我们循环展示的对象 列表套字典

    let infos = [
        { image:'img/111.jpg',
            title:'油画'
    },
        {image:'img/222.jpg',
            title:'漫画'

        },
        {image:'img/333.jpg',
            title:'小猫'

        }
    ];

    // 创建局部组件 渲染样式

    let info = {
        template:`
        <div class="info">
        <img :src="myinfo.image" alt="">
        <p><b>{{myinfo.title}}</b></p>

</div>
        `,
        // 通过props 将获取的
        props:['myinfo']


    };

    // 数据是如何进行交互的呢 数据交互-父传子-通过绑定属性的方法
    // 1)通过父组件提供数据
    // 2/) 在父组件模板中, 为子组件标签设置自定义属性,绑定的值由父组件提供
    // 3) 在子组件实列中,通过props 实列成员获取自定义属性
    new Vue({
        el:'#app',
        //注册局部组件
        components:{
            // 将我们创建的 局部组件进行注册
            'info':info,
        },
        data:{
            // 定义的let infos 进行传值
            'infos':infos
        }

    })
</script>
</html>

十二、组件交互-子传父

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .close:hover {
            cursor: pointer;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="userMsg">
            <button @click="sendMsg">留言</button>
        </p>
        <ul>
            <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let msgLi = {
        template: `
        <li>
            <span class="close" @click="deleteMsg(index)">x </span>
            <span>第{{ index + 1 }}条：</span>
            <span>{{ msg }}</span>
        </li>
        `,
        props: ['msg', 'index'],
        methods: {
            // 系统的click事件
            deleteMsg(i) {
                // $emit('自定义事件名', 参数们)
                this.$emit('remove_msg', i);
                this.$emit('myclick', 1, 2, 3, 4, 5)
            }
        }
    };
    // 组件交互-子传父
    // 1) 数据由子组件提供
    // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
    // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = "";
                }
            },
            removeAction(i) {
                this.msgs.splice(i, 1)
            }
        },
        components: {
            msgLi
        }
    })
</script>
</html>

查看全文

相关阅读:
解决Xcode8打印了nw_socket_handle_socket_event Event mask
调用系统框架使用设备系统语言的设置，相册相机设置为中文
 ios开发之设置多种文字颜色/背景色/文字下划线/行间距 NSString
IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法
 UITableView设置cell的separator 分割线
 iOS用户点击推送消息进入应用后自动跳转到对应的ViewController
随感
 JS获取当前网页大小以及屏幕分辨率等
 js将秒转换为分:秒函数
 css实现强制不换行/自动换行/强制换行

原文地址：https://www.cnblogs.com/mofujin/p/11643669.html