VUE学习

最新推荐文章于 2020-09-02 01:50:28 发布

长门&有希

最新推荐文章于 2020-09-02 01:50:28 发布

阅读量110

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/mjuikl123/article/details/103784261

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

插值表达式 {{ 表达式 }} 另为规范必须前后括号有一个空格
var vm = new Vue({
el: ‘#app’,
data: {
a: 10
}
})
vm.a=100;
vm. $e l . i n n e r H T M L 10 / / 异步代码晚于同步代码，获取的为之前未改动时的值 v m .$ nextTick()// vm. $n e x t T i c k / / d o n 执行完后执行可获取更改后值 / / v m . a / / 可拿到 a 的值 / / v m .$ 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>