VUE基本操作

作者: 陈老板_ | 来源:发表于2018-06-13 15:10 被阅读9次

VUE基本操作
Vue.js学习记录第一天
Vue磨刀嚯嚯
五、Vue动画 ------ 2020-05-07
Vue的基本代码与简单指令
vue-router
Vue.js初级
vue-router 基本操作
Vue | 组件化 | 基本操作
vue3 oss - sdk 上传图片

数据能从内存中绑定到页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <input type="text" v-model="username"> <!--v-model双向数据绑定-->
        <p>Hello {{username}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //创建VUE实例
        const vm = new Vue({ //配置对象
            el: '#app', //element ：选择器
            data: { //mvvm中的model
                username:'atguigu'
            }
        })
    </script>
</body>
</html>

理解MVVM

model：模型，数据对象（data）
view：视图，模板页面
viewmodel：视图模型（vue的实例）
view ---------> DOM监听 Model
view<----------数据绑定 Model

模板语法

模板的理解：动态的html页面，包含了一些JS语法代码---双大括号表达式、指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>双括号表达式</h1>
        <p>{{msg}}</p><!--textContent-->
        <p>{{msg.toUpperCase()}}</p>
        <p v-text="msg"></p><!--textContent-->
        <p v-html="msg"></p> <!--innerHtml-->
        <h1>指令1：强制数据绑定</h1>
        <img src="" alt="">
        <img v-bind:src="imgUrl" alt="">  <!-- v-bind简写为 ：-->
        <h1>指令2：绑定事件监听</h1>
        <button v-on:click="test">test1</button> <!-- v-on简写为 @-->
        <button @click="test2(msg)">test2</button>
    </div>
</body>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'<a href="www.baidu.com">I will back</a>',
            imgUrl:'https://upload.jianshu.io/users/upload_avatars/2508642/3695dffde604.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'
        },
        methods:{
            test(){
                alert(1);
            },
            test2(content){
                alert(content);
            }
        }
    })
</script>
</html>

计算属性和监视

computed 计算属性
watch 监视属性
计算属性存在缓存，多次读取只执行一次getter操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名（单向1）：<input type="text" v-model="fullName1"><br>
        姓名（单向2）：<input type="text" v-model="fullName2"><br>
        姓名（双向）：<input type="text" v-model="fullName3"><br>

        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>

    </div>
    <script src="../js/vue.js"></script>
    <script>
     const vm = new Vue({
            el:'#demo',
            data:{
                firstName:'A',
                lastName:'B',
                fullName2:'A B'
            },
            computed:{
                //什么时候执行：初始化显示执行/相关的data属性数据发生了变化
                //计算并返回当前属性的值
                fullName1(){  //计算属性中的一个方法，方法的返回值作为属性值
                    return this.firstName + " " + this.lastName;
                },
                fullName3:{
                    //回调函数三个条件：你定义的，你没有调用，但最终执行了
                    //回调函数什么时候调用？用来干嘛的？
                    //回调函数 当需要读取当前属性值时回调 根据相关的数据计算并返回当前属性的值
                    get(){
                        return this.firstName + " " + this.lastName;
                    },
                    //回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                    set(value){
                        //value就是fullName3的最新属性值
                        const names = value.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
            },
            watch:{ //配置监视
                firstName:function (value) { //firstName发生了变化
                    console.log(this); //就是vm对象
                    this.fullName2 = value + ' ' + this.lastName;
                }
            }
        })
        vm.$watch('lastName',function (value) {
            //更新fullName2
            this.fullName2 = this.firstName + ' ' +value;
        })
    </script>
</body>
</html>