初视Vue

最开始学习的时候，是在B站上，跟着狂神学习的，怎么说狂神Vue教学时候后端开发者，属于能够看懂，能够少部分写前端的代码，都知道在后端的眼里自己是大后端，懂了吧，同志们。
但是我还是建议后端初学者，应该看一下狂神的Vue教程。给自己以后前端打个基础。

首先，我们不是直接上来就是用vue-cli脚手架创建项目，首先学的是，就是在我们熟知的html中嵌入Vue，简单来说就是导入Vue的包，就像这样：

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

就像我们最开始导入js的文件一样，导入进来之后我们就可以使用Vue了。
这里我们有一个div，他的id值为app，可以看到下面有一个脚本，里面定义了一个变量vm，他是vue的对象，然后使用el来绑定这个app所指的的标签（下面的代码需要放在body里面）。

<div id="app">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app"
    });
</script>

可以看看下面这段代码，相比于上面的代码，在vm对象里面，多了一个data的属性（可以这样看），他是json格式，里面有一个属性叫做message，然后在div里面使用 {{}}来调用，如果你运行了代码，你就会看见界面里面的hello vue，{{}}就是Vue取值的方式。

<div id="app">
    {{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:  {
            message: "hello vue"
        }
    });
</script>

7大属性

谈到Vue，就不得我说Vue的7大属性，其中包括el，data， computed，methods，template，watch，render

el：用来指示vue指示器从哪里开始，可以说是一个占位符
data：数据的存放地方，可以将视图的数据抽象出来放在data里面
computed：用来计算属性的（这个有点忘了）
methods：就是方法，函数
template：用来设置模板
watch：监听，相应数据的变化
render：创建虚拟dom

7大指令

你们都知道无论在什么语言中，都会有if，for等逻辑判断词，vue也有，只不过是类似于v-if，v-for，这些也是vue重要的东西，俗称vue的7大指令，有v-if，v-else，v-for，v-show，v-bind，v-on，v-model

v-if：判断后面的bool值，判断是否做出渲染，

<div id="app">
    <p v-if="isTrue"> 你能看见这句就表示if的值为true</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isTrue: true
        }
    });
</script>

v-else：就和java中的else一样，不多说，可以尝试尝试
v-for：这个就是for循环，拿到data中的数据，使用type in types，type就是每一条数据

<div id="app">
    <li v-for="type in types">
        {{type.message}}
    </li>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            types: [
                {message: "我看众生皆草木,"},
                {message: "唯独视你如青山."}
            ]
        }
    });
</script>