vue选中点击的元素_复习之开启vue之旅

vue.js官网：vuejs.org

在使用 Vue 时，推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

如何使用vue.js？

vue.js 有两个版本， 开发版本（ 包含完整的警告和调试模式） 和 生产版本（ 删除了警告，体积更小）。 建议使用开发版本。

需要下载或直接引入vue.js：

1）下载：

在vue.js官网中，直接下载你所需要的版本。下载完成后，在你的html文件中，引入下载好的vue.js。

2）直接引入：在你的html文件中,直接引入vue.js。

引入开发版本：<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引入生产版本: <scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

使用JavaScript VS 使用Vue.js：

使用JavaScript 来渲染页面：

    <div id="app"></div>
    <script>
        var dom = document.getElementById('app');
        dom.innerHTML = 'Hello World!'
    </script>

使用Vue.js渲染页面：

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app"> {{ content }} </div>
    <script>
        const vm = new Vue({
            el: '#app', // 选中id为app的元素
            data: {
                content: 'Hello World'
            }
        })
    </script>

关于vue.js 的介绍

引入

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引入vue.js后，给我们提供了一个构造函数 Vue，

在js中，new Vue()； 后，会返回一个vue实例对象，

用变量vm接着它，const vm = new Vue()；

传递一个配置对象{} 。 -> const vm = new Vue({});

    <div id="app"> {{ content }} </div>
    <script>
        const vm = new Vue({
            el: '#app', // 选中id为app的元素
            data: {
                content: 'Hello World'
            }
        })
    </script>

Vue实例对象中的配置：

• el

类型： 字符串

全称：element（元素）

作用：配置控制的元素，表示Vue要控制的区域，值为css选择器

    <div id="app">
        <!-- 这里表示被vue控制的区域 , 被控制的区域称为模板 -->
        {{ content }} 
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素区域
            data: {
                content: 'Hello World'
            }
        })
    </script>

• data

类型：对象

作用：存放要用到的数据，数据为响应式的

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        {{ content }} 
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                content: 'Hello World'
            }
        })
    </script>