初学Vue2框架

一枕槐安1

已于 2023-05-01 14:36:39 修改

阅读量602

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-07-13 10:39:31 首次发布

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125757105

版权

前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

Vue2的使用和基本结构

<script>
    // 取消一个开发者提示
    Vue.config.productionTip = false;
    // 创建Vue实例 参数是对象 一个实例只能对应一个容器（先到先得）
    const vm = new Vue({
        // el是element缩写 用于指定当前Vue实例为哪个容器服务器，值通常为css选择器
        el: '.demo',
        data: {//data中存储数据供el所制定的容器使用
            name: 'ldh',
            age: 18,
        },
        computed: {//计算属性,当data中的属性被读取时触发回调函数(getter/setter)
            uname: {
                get() {
                    console.log('uname被读取');
                    return this.name;
                },
                set(value) {
                    this.name = value;
                }
            }
        },
        methods: {//存放用到的函数
            tanchuang() {
                alert('弹窗提示函数');
            }
        },
        watch: {//检测data中数据发生改变时触发回调函数（handler）
            name: {
                handler(newValue, oldValue) {
                    console.log(this.name + '被修改了', newValue, oldValue);
                }
            }
        }
    });
</script>

1.想要让Vue工作就必须创建一个Vue实例，且要传入一个配置对象

2.必须有容器，el选择的容器，容器中的代码一样符合html规范

3.容器和实例必须一一对应（实际开发中只有一个Vue实例）

4.容器中的代码成为Vue模板

下面是容器中的代码

<body>
    <div class="demo">
        <h1>Hello,我是{{name}}</h1>
        <h1>今年{{age}}了</h1>
        <h3>我是{{uname}}</h3>
        <button @click="tanchuang()">点击</button>
    </div>
</body>

Vue模板语法分为两大类

1.插值语法

（1）写法{{xxx}} ， xxx是js的表达式，Vue中的属性都可被读取（例如{{name}}，则会读取到data中的name，显示ldh

（2）作用：解析标签体内容

注意！！！

{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中所有的属性

一旦data中数据发生改变，那么模板中能用到的该数据的地方都会自动更新

注意区分：js表达式和js代码（语句）

1.表达式：一个表达式会产成一个值，可以放在任何一个需要之的地方

(1) a

(2) a+b

(3) demo(1)

(4) x===y?'a':'b'

2.js代码(语句) 控制走向

(1) if(){}

(2) for(){}

2.指令语法：

功能：用于解析标签（包括：标签属性，标签内容，绑定事件......）。

举例：v-bind:href="xxx" 或者简写 :herf="xxx" xxx同样写js 表达式且可以读取data 中的所有属性，v-bind数据单向绑定，标签体内不能用{{}}插值语法，只能用指令语法解析标签中的内容

备注：Vue中有很多指令 v-??? ，此处只是用v-bind举例

框架中的基本属性

el: '.demo',

el属性：指定 Vue实例为那个容器服务，一个实例只能对应一个容器功能类似于css选择器

data: {//data中存储数据供el所制定的容器使用
            name: 'ldh',
            age: 18,
        },

data属性：存放数据，所有的数据都能被指定的容器读取

methods: {//存放用到的函数
            tanchuang() {
                alert('弹窗提示函数');
            }
        },

methods属性：存放需要用到的函数

computed: {//计算属性,当computed中的属性被读取时触发回调函数(getter/setter)
            uname: {
                get() {
                    console.log('uname被读取');
                    return this.name;
                },
                set(value) {
                    this.name = value;
                }
            }
        },

computed属性：当computed中的属性被读取/被修改时调用getter/setter方法

 watch: {//检测data中数据发生改变时触发回调函数（handler）
            name: {
                handler(newValue, oldValue) {
                    console.log(this.name + '被修改了', newValue, oldValue);
                }
            }
        }

watch属性：侦听属性，监视data中的数据，发生改变时调用handler函数