Vue.Js文件的引入：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Vue学习</title>
    <!-- 可以引入本地文件，也可以用CDN方式 -->
    <script src="~/Scripts/vue.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生产环境版本，优化了尺寸和速度 -->
</head>

Vue基本结构

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="id" /><!--要删除的id-->
        <input type="text" v-model="keywords" /><!--搜索关键字-->

        <p>{{msg1}}</p>
        <p>{{msg2}}</p>

        <table>
            <tr><td>Id</td><td>Name</td></tr>
            <tr v-for="item in Search(keywords)">
                <td v-text="item.id"></td>
                <td v-text="item.name"></td>
            </tr>
        </table>


        <input type="button" value="新增" v-on:click="Add" />

        <!--v-on为事件指定的方法名称可以不带括号，也可以带括号的-->
        <input type="button" value="编辑" v-on:click="Edit()" />

        <!--这个id就是v-model绑定的id值，也就是data中的id值-->
        <input type="button" value="删除" v-on:click="Del(id)" />

        <input type="button" value="搜索" v-on:click="Search(keywords)" />


    </div>
    <script>
        //创建Vue实例：当我们导入Vue.js包后，在浏览器内存中就有了Vue构造函数
        var vm = new Vue({
            el: "#app", //指我们new出来的这个vm实例要控制的元素（区域）
            data: { //data中存放的是el中需要用到的数据
                id: '',
                keywords: '',

                msg1: "欢迎学习vue",
                msg2: "你好Vue",
               
                list: [{ id: 1, name: '奔驰' },{ id: 2, name: '宝马' }, { id: 3, name: '奥迪' }]
            },
            methods: { //methods中定义了我们当前new出来的这个vm实例中所有的可用方法
                Add: function () {
                    alert("新增");
                },
                Edit: function () {
                    alert("编辑");
                },
                Del: function (id) {
                    alert(id);
                },
                Search: function (keywords) {
                    //var newList = []; //搜索到的结果结合
                    //this.list.forEach((item, index) => {
                    //    if (item.name.indexOf(keywords) != -1) {
                    //        newList.push(item);
                    //    }
                    //})
                    //return newList;

                    //或者用下面这个种方式[注意：ES6中可以实现数组遍历的方法有 forEach，some,filter，findIndex]
                    //filter返回的是满足条件的集合
                    return this.list.filter((item,index) => {
                        if (item.name.includes(keywords)) { //includes()的作用，是查找一个值在不在数组里，若在，则返回true，反之返回false。 基本用法：['a', 'b', 'c'].includes('a')返回 true
                            return item;
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

v-cloak指令

当我们使用{{...}}来渲染数据的时候，如果网速比较慢的情况下，数据还没加载出来，页面上就会出现{{...}}代码

例如：

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

在网速比较缓慢的情况下页面会出现 {{msg}} 直到等数据加载成功后，才会显示真正的数据。为了避免这种情况发生，Vue提供了v-cloak指令来解决这个问题。
那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <style type="text/css">
        /*在这里定义个[v-cloak]样式*/
        [v-cloak] {
            display: none !important; /*当msg数据加载完毕，vue会自动将display修改为block*/
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "你好Vue"
            }
        })
    </script>
</body>
</html>

v-text指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        @*
        v-text默认是没有闪烁的问题的。 当msg数据加载完毕，vue会将msg数据插入标识了v-text的标签元素中；
        例如： <p v-text="msg"></p> 最后被渲染成<p>你好Vue</p>
        注意： v-text是覆盖插入，即便标签有初始值，如<p v-text="msg">哈哈</p>，当msg数据加载完毕后，
		   vue会将msg的值插入到<p>标签的中间，原有的值“哈哈”将会被覆盖，最后被渲染成<p>你好Vue</p>
        *@
        <p v-text="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",

            data: {
                msg1: "你好Vue",               
            }
        })
    </script>
</body>
</html>

v-html指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        @*
        假设我们的msg数据就是一个标签，我们想将她以标签的形式展示出来，而不是以字符串的形式展示，这时候可以使用v-html
        *@
        <p v-text="msg1"></p>

        <p v-html="msg1"></p>
        <p v-html="msg2"></p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg1: "<H1>你好Vue</H1>",
                msg2:"<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</body>
</html>

v-bind指令 :绑定属性的指令

v-bind指令只能实现数据的单向绑定，从Model绑定到View

<html>
<head>
    <script src="~/Scripts/vue.js"></script>  
</head>
<body>
    <div id="app" v-cloak>
        <!--v-bind 是vue中用于绑定属性的指令-->
        <input type="button" v-bind:value="myvalue" v-bind:title="mytitle" />
        <!--因为mytitle是一个变量，所以它还可以做运算； 例如：这里指定mytitle这个变量与字符串"123"相加-->
        <input type="button" v-bind:value="myvalue" v-bind:title="mytitle+'123'" />
        <!--v-bind可以简写为英文的冒号 ： 后面跟需要绑定的属性名称就可以了 例如：:value -->
        <input type="button" :value="myvalue" :title="mytitle" />

    </div>

    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                myvalue:"我是按钮",
                mytitle: "我是title"
            }
        })
    </script>
</body>
</html>

v-on指令：用于绑定事件的指令

<html>
<head>
    <script src="~/Scripts/vue.js"></script>  
</head>
<body>
    <div id="app" v-cloak>
        <!--v-on是vue中用于绑定事件的指令-->
        <input type="button" value="按钮" v-on:click="myClick" />

        <!--注意：在vue官方文档中v-on的简写形式是@符号，但是在MVC视图中@符号和 Razor引擎冲突，所有需要用@@的形式来简写v-on指令-->
        <input type="button" value="按钮" @@click="myClick" />
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {     
                name: "张三",
                age:25
            },
            methods: {
                myClick: function () {

                    //注意：在vue实例vm中，如果想要获取data中的数据，或者想要调用methods中的方法，
                    //必须通过this.属性名或this.方法名来进行访问；这里的this就表示我们new出来的vm对象实例

                    alert(this.name); 
                }
            }
        })
    </script>
</body>
</html>

v-on指令的stop事件修饰符：阻止冒泡

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <style>
        .box {
            border: 1px solid red;
            width: 80px;
            height: 50px;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
            margin-bottom:40px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <label>这是没有阻止button被点击后的所触发的事件冒泡</label>
        <div class="box" @@click="divClick">
            <!--在click事件后面加一个.stop就可以阻止事件冒泡-->
            <input type="button" value="按钮" @@click="btnClick" />
        </div>

        <label>这是阻止了button被点击后的所触发的事件冒泡</label>
        <div class="box" @@click="divClick">
            <!--在click事件后面加一个.stop就可以阻止事件冒泡-->
            <input type="button" value="按钮" @@click.stop="btnClick" />
        </div>
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userName: "Hello",
            },
            methods: {
                btnClick: function () {
                    alert("点击了button按钮");
                },
                divClick: function () {
                    alert("点击了div");
                }
            }
        })
    </script>
</body>
</html>

v-on指令的 prevent事件修饰符：阻止默认事件

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--a标签有一种默认的行为，就是点击它后会跳转到指定的网页-->
        <!--假如就像点击这个a标签，触发我指定的事件，而不是去执行这个a标签的默认行为（跳转）怎么办呢？-->
        <!--vue中，只要在事件名称的后面.prevent就可以阻止事件的默认行为了-->
        <a href="http://www.baidu.com" v-on:click.prevent="aClick">去百度</a>
    </div>   
    <script>
        var vm = new Vue({
            el: "#app",
            data: {               
            },
            methods: {
                aClick: function () {
                    alert("点击了a标签");
                }
            }
        })
    </script>
</body>
</html>

v-on指令的once事件修饰符：事件只触发一次

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--a标签有一种默认的行为，就是点击它后会跳转到指定的网页-->
        <!--假如就像点击这个a标签，触发我指定的事件，而不是去执行这个a标签的默认行为（跳转）怎么办呢？-->
        <!--vue中，只要在事件名称的后面.prevent就可以阻止事件的默认行为了-->
        <!--事件修饰符还可以连写， 比如v-on:click.prevent.once 就表示阻止默认事件，同时事件只触发一次-->
        <!--v-on:click.prevent.once 与v-on:click.once.prevent效果是一样的-->
        <a href="http://www.baidu.com" v-on:click.prevent.once="aClick">去百度</a>

        <input type="button" value="只触发一次事件的按钮" v-on:click.once="aClick" />
    </div>   
    <script>
        var vm = new Vue({
            el: "#app",
            data: {               
            },
            methods: {
                aClick: function () {
                    alert("点击了");
                }
            }
        })
    </script>
</body>
</html>

v-on指令的 capture事件修饰符

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。
代码如下：

<body>
    <div id="app" v-cloak>
        <!--在click事件后面加一个.capture就可以添加事件侦听器时使用事件捕获模式-->
        <div class="box" @@click.capture="divClick">
            <input type="button" value="按钮" @@click="btnClick" />
        </div>
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {               
            },
            methods: {
                btnClick: function () {
                    alert("点击了button按钮");
                },
                divClick: function () {
                    alert("点击了div");
                }
            }
        })
    </script>
</body>

我们可以看到当我们点击了按钮,最先触发的是点击了div,然后才触发了点击了button按钮，这就是上面所说的则由外而内触发

v-model指令：实现数据的双向绑定

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>

        <p v-text="userName"></p>

        <!--v-model能实现表单元素和Model中数据的双向绑定-->
        <!--注意：v-model只能运用在表单元素中，如：input(radio,checkbox,text,address,email....) select,textarea 等等-->
        <input v-model="userName" />       
    </div>
    <span id="qq_login_btn" data-role="none"></span>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userName: "Hello",
            }          
        })
    </script>
</body>
</html>

Vue中通过属性绑定为元素设置class样式

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
    <style>
        .a {
            color: red;
        }

        .b {
            font-size: x-large;
        }

        .c {
            font-style: italic
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!--平常我们普通的设置样式加-->
        <div class="a b c">1:猥琐发育，别浪</div>

        <!--采用v-bind设置样式： 数组加载样式-->
        <div v-bind:class="['a','b','c']">2:猥琐发育，别浪</div>

        <!--采用v-bind设置样式： 数组加载样式，并在数组中做三元表达式条件来设置样式-->
        <div v-bind:class="['a','b', isShow?'c':'']">3:猥琐发育，别浪</div>

        <!--采用v-bind设置样式： 数组中嵌套使用：只有在isShow的值为true的时候，才会显示c样式-->
        <div v-bind:class="['a','b',{'c':isShow}]">4:猥琐发育，别浪</div>

        <!--采用v-bind设置样式： 直接使用对象(a，b，c这些类名可以不用单引号引起来，也可以用单引号引起来)-->
        <div v-bind:class="{a:true,b:true,'c':true}">5:猥琐发育，别浪</div>

        <!--采用v-bind设置样式： 直接使用对象，这个对象也可以放到Data中-->
        <div v-bind:class="divClass">6:猥琐发育，别浪</div>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true,
                divClass: { a: true, b: true, 'c': true }
            },
        })
    </script>
</body>
</html>

Vue通过属性绑定为元素设置style行内样式

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--第一种：直接写在元素上； 注意：如果对象的键中间有-线 则不能省略单引号，键的值也需用用单引号引起来-->
        <div v-bind:style="{color:'red', 'font-size':'50px'}">猥琐发育，别浪</div>

        <!--第二种：写在Data中； 注意：如果对象的键中间有-线 则不能省略单引号，键的值也需用用单引号引起来-->
        <div v-bind:style="divClass1">猥琐发育，别浪</div>

        <!--第三种：写在Data中； 假设Data中设定了2种样式，在这个元素上我都上使用，可以使用[]的形式-->
        <!--注意：数组中的样式变量不要加单引号-->
        <div v-bind:style="[divClass1,divClass2]">猥琐发育，别浪</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true,
                divClass1: { color: 'red' },
                divClass2: {'font-size':"50px"}
            }
        })
    </script>
</body>
</html>

v-for指令：遍历

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--循环普通数组：1个参数的for-->
        <p v-for="item in list">{{item}}</p>
        <!--循环普通数组：2个参数的for-->
        <p v-for="(item,index) in list">索引:{{index}}--值：{{item}}</p>


        <!--循环复杂数组：1个参数的for-->
        <p v-for="item in list2">{{item.name}}</p>
        <!--循环复杂数组：2个参数的for-->
        <p v-for="(item,index) in list2">索引:{{index}}--id值:{{item.id}} --name值:{{item.name}}</p>


        <!--循环对象：第一个参数是必选的，第二个，第三个是可以选的-->
        <p v-for="(val,key,index) in user">索引：{{index}}--ket值为{{key}}--val值为:{{val}}</p>

        <!--遍历数字：这里输出1,2,3,4,5,6,7,8,9,10-->
        <!--注意，遍历数字是从1开始的，而不是0哦-->
        <p v-for="item in 10">{{item}}</p>


    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5, 6],
                list2: [
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' },
                    { id: 4, name: '赵六' }
                ],
                user: { id: 1, name: "lily", age: 25, address: "北京朝阳三里屯", email: '[email protected]' },
            }
        })
    </script>
</body>
</html>

v-for中key的使用注意事项

当在vue.js中用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略，如果数据项的顺序被改变vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给vue一个提示，以便它能够跟踪每个节点的身份，从而重用新排序现有的元素，你需要为每项提供唯一的key属性

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--v-for中key的使用注意事项-->
        <!--
    当在vue.js中用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略，如果数据项
    的顺序被改变vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保
    它在特定索引下显示已被渲染过的每个元素。

    为了给vue一个提示，以便它能够跟踪每个节点的身份，从而重用新排序现有的元素，你需要为每项
    提供唯一的key属性
    -->
        <label>
            id
            <input type="text" v-model="id" />
        </label>
        <label>
            name
            <input type="text" v-model="name" />
        </label>

        <input type="button" value="添加" v-on:click="add" />
        <!--为了解决下面描述的问题。你需要为每项提供唯一的key属性，其实就是在v-for后面加一个 v-bind:key 
            让这个key绑定遍历项的id，当然也可以绑定其他的值，比如name，只要值唯一就行了，因为id一般是唯一的，所以我们绑定的是item.id-->
        <p v-for="(item) in list" v-bind:key="item.id">
            <input type="checkbox" value="{{item.id}}" />
            {{item.id}}--{{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: '',
                name: '',
                list: [
                    { "id": 1, name: "嬴政" },
                    { "id": 2, name: "李斯" },
                    { "id": 3, name: "韩非" },
                    { "id": 4, name: "荀子" }
                ]
            },
            methods: {
                add: function () {
                    //this.list.push({ "id": this.id, "name": this.name }) //往后面追加没问题

                    //假设从开始追加数据：我们开始勾选住荀子，然后开始追加一项
                    //假设我们追加一个 id=5,name="赵高"的项。这时候我们会发现，之前勾选的荀子，变成了韩非了
                    //这是因为vue 只知道你勾选了索引为3的那一项（索引从0开始），当你从开始位置新增一个元素，
                    //那么你之前勾选的索引为3的那一项，现在索引位置已经变成4了。而前面的韩非变成了索引为3了
                    //所以才出现之前勾选的荀子，现在变成了韩非了

                    //为了解决这个问题。你需要为每项提供唯一的key属性,其目的就是让索引与绑定的值关联起来。
                    this.list.unshift({ "id": this.id, "name": this.name }) 
                }
            }           
        })
    </script>
</body>
</html>

没有加v-bind:key="item.id"的效果

添加了v-bind:key="item.id"的效果

Vue基础：第一天

Vue.Js文件的引入：

Vue基本结构

v-cloak指令

v-text指令

v-html指令

v-bind指令 :绑定属性的指令

v-on指令：用于绑定事件的指令

v-on指令的stop事件修饰符：阻止冒泡

v-on指令的 prevent事件修饰符：阻止默认事件

v-on指令的once事件修饰符：事件只触发一次

v-on指令的 capture事件修饰符

v-model指令：实现数据的双向绑定

Vue中通过属性绑定为元素设置class样式

Vue通过属性绑定为元素设置style行内样式

v-for指令：遍历

v-for中key的使用注意事项

猜你喜欢

Vue基础：第一天

Vue.Js文件的引入：

Vue基本结构

v-cloak指令

v-text指令

v-html指令

v-bind指令 :绑定属性的指令

v-on指令：用于绑定事件的指令

v-on指令的stop事件修饰符：阻止冒泡

v-on指令的 prevent事件修饰符：阻止默认事件

v-on指令的once事件修饰符：事件只触发一次

v-on指令的 capture事件修饰符

v-model指令 ：实现数据的双向绑定

Vue中通过属性绑定为元素设置class样式

Vue通过属性绑定为元素设置style行内样式

v-for指令：遍历

v-for中key的使用注意事项

猜你喜欢

v-model指令：实现数据的双向绑定