袁磊老师的课，VUE（二）

老师说，vue主要靠大家联系，所以，这节课的练习会多一些。

一、Vue基础应用
1.v-bind
①作用：动态设置属性值，可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和css。
②语法：
正常：v-bind：属性名=“引用data中定义的变量”
简写：：属性名=“引用gdata中定义的变量”修饰符
举例子1：
v-bind简写举例子：

2.v-once
作用：只绑定一次，只渲染一次，即时数据更新，也不变化

3.v-pre
作用：在模板中跳过vue的编译，直接输出原始值，不进行解析了。

4.v-for
①作用：遍历数组、对象或者指定遍历多少次
②语法：
a.v-for = “(v, i) in list”
b.v-for = “(v, k) in obj”
c.v-for = “n in 5” //n就是一个相关的数字，包括0

5.v-model
①作用：表单支的双向绑定，就是视图中的值发生变化，model中也跟着变化，反之也一样
②作用范围： input/ select/ textarea/ components(Vue中的组件)
③举例：
袁磊老师的课，VUE（二）
④修饰符（了解）：
.lazy - 取代input监听change事件
.trim - 自动将输入的内容首尾空格去掉

.number -自动将输入的字符串换转为数字

今天的练习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h2 v-once>v-once:{{msg}}</h2>
        <!-- v-once只绑定一次，不变哦 -->
        <h2 v-pre>v-pre: {{msg}}</h2>
        <!-- v-pre不会解析里面的代码，直接显示{{msg}} -->
        <input v-model="msg">
        <!-- 双向数据绑定 -->
        <!-- <input v-model.lazy.trim="msg"> -->
        <!--  .lazy: 从keydown到onclick    .trim : 去掉空格 -->
        <h2 v-if="goods.length">
            <!-- 当goods.length不为零的时候 -->
            一共有{{goods.length}}种水果
        </h2>
        <h2 v-else>没有水果</h2>
        <ul>
            <!-- template不会生成html 是为了更好的辅助v-for    -->
            <template v-for="(v,i) in goods">
                <!-- 这里面的v是指值，可以把i理解为下标！ -->
                <li>{{i+1}} {{v}}<button @click="del(i)">删除</button></li>
            </template>
        </ul>

        <template v-for="(v,k) in news">
            <!-- <div>{{k}} {{v}}</div> -->
            <!-- 上面这行注释可以自己取消，来看效果 -->

            <div>{{k+1}} {{v.title}} <strong>{{v.author}}</strong></div>
        </template>
        <h3 v-for="i in 4">{{i}} {{goods[i-1]}}</h3>
        <!-- 上面的for中i不包括0，包括4 -->
        <button @click="goods.push(msg)">增加水果</button>
    </div>


    <script src="vue.js"></script>
    <script>
        vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello,World",
                seen: "true",
                goods: ['苹果', '橘子', '香蕉', '火龙果', '草莓', '芒果'],
                // 再来定义一个json数据
                news: [{
                        'title': '标题1',
                        'author': 'zfk'
                    },
                    {
                        'title': '标题2',
                        'author': 'zss'
                    }
                ]
            },
            methods: {
                del: function (index) {

                    console.log("删除")
                    // 这个参数就是上面定义的i，这里不用和上面相同
                    this.goods.splice(index, 1);
                    // splice是数组之中删除元素，从index开始删除，每次删除1个

                },

            },
        });
    </script>
</body>

</html>

袁磊老师的课，VUE（二）
注意看状态的变化哦，数据是双向绑定的哟~
今天的笔记就倒这里啦，拜拜