Vue2.0代码入门篇之内部指令的学习笔记

最新推荐文章于 2023-11-28 00:03:37 发布

Arabic1666

最新推荐文章于 2023-11-28 00:03:37 发布

阅读量303

点赞数

分类专栏： JavaScript Vue系列文章标签： Vue JavaScript 前端开发

本文链接：https://blog.csdn.net/Arabic1666/article/details/80200988

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vue系列

3 篇文章 0 订阅

订阅专栏

代码理解：

Css buf

<style>
    .warnText{
        color:red;
    }
    .bigText{
        font-size: 24px;
    }
    [v-cloak] {
        display: none;
    }
</style>

HTML buf

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloVue内部指令</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<!-- 模拟登陆 -->
<body>
    <p>helloTest</p>
    <hr>
    <div id="app">
        <!-- 模板的输出 渲染 -->
        <!-- {{}}输出弊端 网速很慢 一闪而过 或者 javascript出错时，会暴露我们的{{xxx}} -->
        <span>{{message}}</span>
        <br>
        <!-- v-pre:直接跳过此标签的渲染工作  无需表达值-->
        <span v-pre v-text="message">{{message}}</span>
        <br>
        <!-- v-cloak:和 CSS 规则如: [v-cloak] { display: none } 一起用时，
            这个指令可以隐藏未编译标签直到实例准备完毕。
            该标签在渲染完成后，才会显示出来 
        -->
        <span v-cloak>{{msg2}}</span>
        <br>
        <!-- 实际开发使用以下动态渲染 解决弊端 友好用户 -->
        <span v-text="message"></span>
        <!-- v-html尽量不用尤其是在可提交页面上 避免xss攻击 代码植入到提供给其它用户使用的页面中 类同于sql注入-->
        <span v-html="html_msg"></span>
        <!-- 作为属性直接使用 判断是否加载 html的DOM-->
        <div v-if="isSingle"> hello, My baby. </div>
        <div v-else> <a href="#" id="testa">login</a> </div>
        <!-- 不同于v-if     v-show会被渲染DOM 但是通过css display:none;设置隐藏 -->
        <div v-show="isSingle">hello login display is none</div>
        <!-- v-if 和v-show的区别：
                v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
                v-show：调整css dispaly属性，可以使客户端操作更加流畅。
         -->
        
        <ul>
            <!-- v-for指令是循环渲染一组data中的数组.   循环该标签
                    以 item in items 形式的特殊语法，item是数组元素迭代的别名。
                -->
            <li v-for="item in sorted_items">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <!-- 对象数组   ,index 指数组下标 序号 输出 -->
            <li v-for="(person, index) in sorted_persons">
                {{index}}). {{person.name}} - {{person.age}}
            </li>
        </ul>
        <!-- v-model 绑定数据源 实现数据双向绑定 勇于表单-->
        <!-- 修饰符
            number：遇到非数字其后全部切掉  但是第一个字母就是非数字则number无效、
            lazy：失去焦点时才加载，俗称懒加载、
            trim：去掉首位空格
        -->
        name:<input type="text" width="8" placeholder="input name" v-model.lazy="new_name">
        age:<input type="number" width="3" placeholder="number" v-model.lazy="new_age">
        <!-- ""里面的内容是相当于js语句 
            v-once只渲染元素和组件 第一次   随后重新渲染都会跳过此标签 提高优化更新性能
        -->
        <span v-if="new_name" v-once> hello! {{new_name}} {{checkedSex}} </span>
        <br>
        <!-- 单选radio 双向绑定 不需要checked控制默认-->
        <input type="radio" id="boy" name="sex" value="boy" v-model="checkedSex">
        <label for="boy">boy</label>
        <input type="radio" id="girl" name="sex" value="girl" v-model="checkedSex">
        <label for="girl">girl</label>
        <br>
        <!-- 单个复选框 绑定到布尔值    isAceept:true 选中 -->
        <input type="checkbox" id="acceptMe" v-model="isAccept">
        <!-- :class动态修改  根据!isAccept值     warnText为类名 非定义的data数据-->
        <!-- 四种绑定 控制样式   foo、bar均为变量
            支持:判断    :class="{className: !isTrue}"
            支持数组    :class="[foo, bar]"
            支持三元运算符  :class="isTrue? foo : bar"
            支持对象    :style="styleObject"
        -->
        <label for="acceptMe" :class="{warnText:!isAccept}">I <span v-if="!isAccept">don't</span>    agree it</label>
        <br>
        <label for="acceptMe" :class="[classA, classB]">I <span v-if="!isAccept">don't</span>    agree it</label>
        <br>
        <label for="acceptMe" :class="isAccept?classB:classA">I <span v-if="!isAccept">don't</span>    agree it</label>
        <br>
        <label for="acceptMe" :style="styleObject">I <span v-if="!isAccept">don't</span>    agree it</label>
         
        <!--@click 同 v-on:click 绑定DOM事件 触发即运行指定子程序-->
        <button @click="addUser">add a user</button>
        <hr>
        <!-- 多选框绑定数组 按照选中顺序将value值添加到数组中 -->
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
        <hr>
        <!-- <img src="../images/404.jpg" alt="just a test" width="222"> -->
        <!-- :src 同v-bind:src  对该标签的src属性进行绑定 做到动态赋值 多用于动态切换className等 -->
        <img :src="imgSrc" alt="just a test" width="288">
    </div>
</body>
</html>

JavaScript buf

<script type="text/javascript">
    // Vue对象大写v
    var app = new Vue({ //app.message = '111'   响应式验证console
        el:'#app',
        //data写在前面，便于后续函数使用数据等
        data: {
            message: 'helloWord!',
            html_msg: '<a href=\'#\'>abc</a>',
            isSingle: false,
            // 数组的每一项都可以保存任何类型的数据
            //数组的大小是动态调整的，可以随着数据的添加自动的增长
            items: ['cherries', 'apples', 'Bananas', 3, 22, '3chicken'],
            persons: [
                {'name': 'Tony', 'age': 11},
                {'name': 'arabic', 'age': 10},
                {'name': 'flc', 'age': 13},
            ],
            //必须初始化值
            new_name: '',
            new_age: undefined,
            isAccept: false,
            checkedSex: "boy",
            checkedNames: [],
            imgSrc: "../images/404.jpg",
            classA: "warnText",
            classB: "bigText",
            styleObject: {
                'color': 'green',
                fontSize: '150%',
            },
            msg2: "该标签在渲染完成后，才会显示出来",
        },
        computed: {
            //重新声明sort_items Vue保护机制:不允许污染原来的数据源(data)
            sorted_items: function(){
                // Array.prototype.sort()   可选参数compareFunction 自定义排序规则
                //默认排序规则 Unicode码的字符串排序
                //返回排序后的数组
                return this.items.sort();
            },
            //简写(对比上) 同样可以输出sort_persons数组
            sorted_persons () {
                return sortByKey(this.persons, 'age');
            }
        },
        methods: {
            addUser: function () {
                //全部加this 访问Vue对象定义的数据?
                if(this.isAccept && this.new_age!=='' && this.new_name!==''){  
                    //数组push
                    this.persons.push({name: this.new_name, 'age': this.new_age});
                }
            }
        }
    });
    //对象数组按key排序
    function sortByKey(array, key){
        //a、b默认皆为array要比较的元素
        //a < b, 则a排在b前面
        return array.sort(function(a, b){
            // ignore upper and lowercase
            var x = a[key].toString().toUpperCase();
            var y = b[key].toString().toUpperCase();
            return (x<y? -1 : (x>y? 1 : 0));
        });
    }
    //原生写法
    document.getElementById("testa").onclick = function(){
        app.isSingle =!app.isSingle;
    }
</script>