VUE基础--快速入门

1.VUE指令

1.1v-text

<div id="app">
        <h2 v-text="message+'!'"></h2>
        <h2 v-text="message"></h2>
        <!-- 部分替换 -->
        <h2>{{message+'!'}}深圳</h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "学习",
                info: "第二个"
            }
        })
    </script>

1.2v-html

1.2.1:v-html指令的作用是:设置元素的innerHTML
1.2.2:内容中有html结构会被解析为标签
1.2.3:v-text指令无论内容是什么,只会解析为文本
1.2.4: 解析文本 使用v-text,需要解析html结构使用v-html

1.2v-on :为元素绑定事件

1.21
点击事件: v-on:click=“方法”
鼠标移入事件: v-on:monseenter = “方法”
双击事件: v-on:dblclick = ""方法
1.22
@click 另一个写法
1.23:绑定的方法定义在methods属性中
1.24:方法内部通过this关键字可以访问定义data中数据 同步更新页面数据

 <div id="app">
        <input type="button" value="-" @click="sub">-
        <span>{{num}}</span>
        <input type="button" value="+" @click="add">+
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                sub: function () {
                    if (this.num < 0) {
                        alter(最小了);
                    } else {
                        this.num--
                    }
                },
                add: function () {
                    if (this.num < 0) {
                        alter(最大了);
                    } else {
                        this.num++
                    }
                }
            }
        })
    </script>
</body>

1.2v-show :根据表达值的真假,切换元素的显示和隐藏

1.21:原理是修改元素的display,实现隐藏
1.22:指令后面的内容,最终都会解析为布尔值
1.23:值为true元素显示,值为false隐藏
1.24:数据改变之后,对应元素的显示状态会同步更新

1.2v-if :根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

频繁操作的用v-show

1.2v-bind :设置原色的属性比如(src,title,class)

1.21:v-bind指令的作用是:为元素绑定属性
1.22:完整写法是v-bind:属性名
1.23:简写的话可以直接省略v-bind,只保留:属性名
1.24:需要动态的增删class建议使用对象的方式

1.2v-bind :设置原色的属性比如(src,title,class)

1.2v-for: 数据生成列表结构

1.21:根据数据生成列表结构
1.22:数组经常和v-for结合使用
1.23:语法是(item,index) in 数据
1.24:item和index 可以结合其他指令一起使用
1.25:数组长度的更新会同步到页面上,是响应式的

 <div id="app">
        <ul>
            <li v-for="" item in arr>
                数字:{{item}}
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["123", "456", "789"]
            },
        })
    </script>

1.2v-on补充: 自定义参数,时间修饰符

1.21:事件绑定的方法写成函数调用的形式,可以传入自定义参数
1.22:定义方法时需要定义形参来接收传入的实参
1.23:事件的后面跟上.修饰符可以对事件进行限制
1.24:enter可以限制触发的按键为回车
1.25事件修饰符有很多种

<div id="app">
        <input type="button" value="点击" @click="doit(66,'laotie')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doit: function (p1, p2) {
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
                    alter("吃了没")
                }
            }
        })

1.2v-model获取和设置表单元素的值(双向数据绑定)

v-model 指令作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据 <–> 表单元素的值