1_Vue2.x起步

最新推荐文章于 2023-03-06 22:28:06 发布

paopao_wu

最新推荐文章于 2023-03-06 22:28:06 发布

阅读量164

点赞数

分类专栏： Vue实战前端文章标签： vue javascript js vue.js es6

本文链接：https://blog.csdn.net/paopao_wu/article/details/107663076

版权

前端同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

Vue实战

15 篇文章 1 订阅

订阅专栏

1. 在HTML文件中使用vue

使用传统最简单的方式，在HTML文件中引入Vue js库后使用vue。这里采用VSCode IDE环境编辑器。

01_01_html/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue入门01</title>
</head>

<body>
    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            template: '<p>{{message}}</p>',
            data: {
                message: 'Hello Vue!'
            }
        });
        vm.$mount(document.getElementById('app'))
    </script>
</body>

</html>

定义一个id为app的div，这个div就是一个容器，将来vue实例对象中的内容会被挂载到这个容器上。
从cdn上引入vue.js库文件。
使用new关键字实例化Vue对象。通常可以认为一个vue实例对象就是一个应用，这个应用包含了视图界面，数据和执行逻辑。实例化Vue对象的时候可以有很多选项，例子中用到了两个选项： template选项表示视图模板，这个模板中可以使用 {{...}} 这样的表达式将数据 "填充"到模板上，模板被解析后就是视图（HTML片段）。data选项中存储数据，这里存放了一个message数据，应用执行后这个message被填充到模板中
vm变量指向Vue对象，vue对象有一个 $m o u n t 方法（注意该方法前面有个$ 符号），这个方法的作用就是将vue实例（应用）挂载到HTML的DOM节点上

页面执行后的结果：
在这里插入图片描述

可以看到，原先定义的<div id="app"></div> 被Vue实例对象中的template替换掉了，这就是vm.$mount挂载的结果。

vue对象的$mount方法参数可以是一个dom元素，也可以是一个选择器。该方法的官方文档：https://cn.vuejs.org/v2/api/#vm-mount

  //vm.$mount(document.getElementById('app'))
 vm.$mount('#app') //这两句代码的作用是一样的。

2. 使用el选项

上面例子中使用了 template 和 data两个选项表达出vue对象的内容，然后用 vue对象的$mount方法挂载到DOM元素上，其实也可以使用el选项直接指定要挂载的DOM元素，这样就无需调用 $mount方法来挂载了。

var vm = new Vue({
    el: '#app',
    template: '<p>{{message}}</p>',
    data: {
        message: 'Hello Vue!'
    }
});

3. 省略template

在实例化Vue对象的时候，如果存在 template，那么template的内容将会完全替换掉el指定的DOM元素，如果没有指定template，那么el指定的 DOM元素将会被提取出来作为模板。

01_02_html\index.html
在这里插入图片描述

注意 template会完全替换 el指定的元素，但如果没有template，el不会被替换，而会当成模板来解析。

4. 简单事件处理

在这里插入图片描述
当点击按钮"click me" 之后，上面的文字变成 “Hello World!”
01_03_event\index.html

<body>
    <div id="app">
        <p>{{message}}</p> <button v-on:click="hello">click me</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                hello: function() {
                    this.message = "Hello World!";
                }
            }
        });
    </script>
</body>

代码中增加了methods选项，顾名思义这个选项中定义的都是方法。当发生事件之后，调用这个方法。按钮上使用了 v-on:click ,这个属性HTML中是没有的，只有Vue框架才有。因为整个div已经被作为vue的模板了，vue在解析模板的时候，会按照 v-on:click 来为dom元素注册事件。 v-on 是前缀，click是事件名称（标准dom事件名称去掉on），中间用":"分割，后面双引号中的内容是事件处理函数的名称，它必须 methods中定义。

v-on:click= “” 等号后面的双引号中的内容其实也可以是JavaScript表达式，对于比较简单的事件处理可以不必调用事件处理函数来处理。

<button v-on:click="message='Hello World!!!'">click me</button>

注意：双引号中的内容是“看起来像字符串的JavaScript表达式”，也就是说它本质上是一个JavaScript代码，只不过它用双引号包含起来了，因为这样看起来更向HTML规范的写法。但是vue框架在处理它的时候，会将它当成JavaScript代码来处理。

可以看到模板中访问 vue中的 data和methods中定义的变量和方法的时候，都是可以直接访问的。因为模板”看起来“像HTML代码，实际上它是JavaScript代码，因为它们执行的时候会被放入到vue实例对象内部来解析的，在vue对象内部，this其实就是vue实例对象，模板中可以直接访问data和methods中定义的变量和方法

5. Vue与传统的DOM编程

传统的DOM编程是要靠JavaScript代码来操作DOM对象的，实现对DOM节点（对象）的增，删，改，查。从上面的例子中可以看到，我们并没有直接操作DOM，而是通过JavaScript代码来操作数据，Vue框架发现数据发生变化之后，自动渲染DOM节点。它之所以能够做到这一点，是因为Vue引入了虚拟Dom的概念(Virtual Dom) 它主要解决了浏览器DOM操作的性能问题。后面篇幅中会详细讲解。

paopao_wu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
1_Vue2.x起步

1. 在HTML文件中使用vue使用传统最简单的方式，在HTML文件中引入Vue js库后使用vue。这里采用VSCode IDE环境编辑器。01_01_html/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫