快速学习Vue2（1）

认识 Vue.js

在一个不需要任何环境的html文件中，我们需要通过一段代码将Vue引入html文件中

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

引入完成之后，我们需要做一些基础的学习：

在html中使用Vue，有以下规则：

<!--html代码在最前面-->
<div id="app"></div>

<!--引入vuejs的代码在html代码之前，js代码之后-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!--js代码在最后面-->
<script></script>

创建一个基于Vue的App

因为Vue是使用一个class把所有重要的东西包裹起来的，所以我们创建基于Vue的一个网页应该使用new Vue()来使用Vue。

Vue是使用一个HtmlSelector去分辨那一段是Vue的代码的，所以我们在el项中填一个HtmlSelector，例如上面的代码，就应该写成这样：

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

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>
new Vue({
    el:"#app",
})
</script>

创建一个能在Html使用的数据

如果问vue比js好在哪里，我会马上回答，js数据与html联系特别方便，短短几行代码，超越了一堆令人难解的js代码，这样，不仅提高了我们的创作效率，还提高了我们阅读代码的效率。

创建一个数据在Vue中是使用data创建的，而在html中引入数据分别为textContent，Attribute设计了方案

在Vue中创建一个可供html使用的数据是这样的：

new Vue({
    el:"#app",
    data: {
        data1:"vue",
        // 数据名：值,
    }
})

而在html中引用是这样的：

• textContent应用：

<div id="app">
    <h1>we love {{data1}},{{data1}} is very good!</h1>
    <!-- <html元素 >其他{{数据名}}其他</html元素> -->
</div>

• Attribute运用：

<div id="app">
    <input :placeholder="data1"/>
    <!-- <html元素 :属性名="数据名"></html元素> -->
</div>

例子

最后我们把以上所学的东西转换成一个极其简单的vue应用：

结尾

以上就是 快速学习快速学习 Vue2（2）的全部内容啦，我们在快速学习 Vue2（2）中再见！