当前位置：首页 > article >正文

Vue：初识Vue

article 2024/11/15 19:20:41

1、首先要导入vue.js

 <!-- 当你使用script标签安装vue之后，上下文就注册了一个全局变量vue -->
 <script src="../1.Vue/js/vue.js"></script>

不能直接调用vue()，需要new vue(),否则会报错。

2、关于vue构造函数的参数options。。。

①Vue框架要求这个options参数必须是一个纯粹的js对象：{}

②在{}对象中可以编写大量的key:value对(键值对)，一个键值对就是一个配置项。

③主要是通过options这个参数来给Vue实例指定多个配置项。

<body>
    <!-- <div id="app"></div> -->
    <div class="as"></div>
    <script>
        const myVue = new Vue({
            // template: '<h1>hello vue！！！</h1>',
            template: '<h3>你好，vue</h3>'
        })
        // myVue.$mount("#app")
        myVue.$mount(".as")
    </script>
</body>

3、关于template配置项：

①用来指定模板语句，模板语句是一个字符串形式的。

②模板语句可以是一个纯粹的HTML，可以是Vue中的特殊规则、可以是HTML代码+vue特殊字符。

③template后面的模板语句会被Vue框架的编译器编译，转换成浏览器能识别的HTML代码。

④template后面指定的是模板语句，但是模板语句中只能有一个根节点。

⑤只要data中的数据发生变化，模板语句一定会重新编译。(只要data变，template就会重新编译和渲染)

⑥如果使用template配置项的话，指定挂载位置的元素会被替换。

⑦可以将模板字符串写到HTML标签中，指定的挂在位置就不会被替换了。

4、模板语句的数据来源：

使用data选项给模板语句提供数据支持，data选项类型是 Object || Function 即(对象或函数)；

如果data是对象的话，对象必须是纯粹的对象，(含有零个或多个的key/value 对)；

{{}} 这是vue框架自己的一套语法，浏览器不能识别，即：模板语法中的插值语法。

5、$mount()方法

Vue实例都有一个$mount()方法，这个方法讲Vue实例挂载到指定位置。

6、配置项：el

el配置项和$mount()方法可以有同样的效果。

作用：告诉vue实例去接管哪个容器，el是element的缩写，即元素

//el: '.divs'
el: document.querySelector(".divs")

7、浏览器提示信息

①提示信息：将productionTip属性改成false(即设置是否生成生产提示信息)

Vue.config是Vue的全局配置对象，默认值为true。如果是false则阻止生成提示信息。

Vue.config.productionTip = false

或者修改vue.js里面的productionTip = false

在chrome上面安装Vue.js devtools插件，去掉控制台前面的信息

8、第一个vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../1.Vue/js/vue.js"></script>
</head>
<body>
    <div class="divs">
        <div>
            <h1>{{name}}</h1>
            <h1>{{mood}}</h1>
        </div>
    </div>
    <script>
        new Vue({
            // template: `<h1>今天刚开启{{name}}，真的非常{{mood}},
            //     其他演员是{{actors[0].name}}:{{actors[0].age}}岁,
            //     {{actors[1].name}}:{{actors[1].age}}岁</h1>`,
            // template: `<div>
            //     <h1>{{name}}</h1>
            //     <h1>{{mood}}</h1>
            //     </div>`,
            data: {
                name: 'vue',
                mood: '开心',
                actors: [
                    {
                        name: '小兰子',
                        age: 20
                    },
                    {
                        name: '安欣',
                        age: 40
                    }
                ]
            },
            // el: '.divs'
            el: document.querySelector(".divs")
        })
        // }).$mount(".divs")
    </script>
</body>

</html>

查看全文

http://www.kler.cn/a/7864.html