VUE学习

VUE学习
第一步：vue引入 使用script标签引入

插值表达式 {{ 表达式 }} 另为规范必须前后括号有一个空格
var vm = new Vue({
el: ‘#app’,
data: {
a: 10
}
})
vm.a=100;
vm.$el.innerHTML10//异步代码晚于同步代码，获取的为之前未改动时的值vm.$nextTick()// vm.$nextTick//don执行完后执行可获取更改后值//vm.a//可拿到a的值//vm.$data//可拿到data里所有值
// vm.$el//vm上的元素

//vm.$mount('#app')   d等于new Vue内的el: '#app'  两者二选一

<!-- 1. v-bind 绑定属性 (v-bind <==> : ) -->
<!-- class  []{}-->
<!-- style  {}[] -->

//绑定多个class、属性只认第一个

方法放到methods里此时this为vm.data
//data里方法能正常执行但此时this为window
另 click事件里多参数时使用指e

<!-- v-else -->
<!-- v-else-if -->

<!-- v-show 控制元素的显示与隐藏-->
<!-- 区别 -->
<!-- 1. v-if控制的dom的移除/添加，v-show控制dom的样式显示与隐藏 -->
        <!-- 频繁的显示/隐藏要使用v-show -->
        <!-- 只判断一次时，使用v-if -->
<!-- 2.v-if可以卸载template上，v-show不写，写了也没用 -->

template实际生成HTML元素中没有

    <!-- 命名任意但尽量不要与数据里名字一样，不冲突，但无法使用数据里的值 -->

<!-- input text -->
<!-- textarea -->
<!-- input checkbox -->
<!-- input radio -->
<!-- select -->

<!-- computed 计算属性 -->
<!-- data > methods > computed -->

<!-- methods：想要写逻辑，比如触发一个事件或在某函数里写另一个函数封装时 -->
<!-- computed：想得到一个新的值 -->
<!-- watch：想要在某个属性改变时做什么事时 -->

 <div id="app">
    <!-- 姓名：{{ name }} 年龄：{{ age }} -->
    <!-- {{ desc() }} -->
    <!-- {{ looks }} -->

    <!-- {{ desc }}
    {{ looks }} -->

    {{ desc }}
    {{ looks }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '杉杉',
            age: 18,
            looks: 'very beautiful',
            // desc: '姓名：杉杉 年龄：18'
        },
        methods: {
            //在页面上使用数据，当改变造成重新渲染时函数会重新执行
            // desc() {
            //     console.log("---methods---")
            //     // ${}可以配合反单引号完成拼接字符串的功能
            //     return `姓名：${this.name} 年龄：${this.age}`;
            // }
        },
        watch: {
            //在观察的数据改变时才执行
            // name() {
            //     console.log("----watch----")
            //     this.desc = `姓名：${this.name} 年龄：${this.age}`;
            // },
            // age() {
            //     this.desc = `姓名：${this.name} 年龄：${this.age}`;
            // }
        },
        computed: {
            //只有涉及到的属性更改时才执行
            desc() {
                console.log("---computed---");
                return `姓名：${this.name} 年龄：${this.age}`;
            }
        }
    })
</script>