vue系列---基本语法篇（一）

[原文链接：]http://blog.restartai.com/2018/09/vue-create-instance/#more-183
前言:
本篇文章就是简单的记录一下vue系列的最最最常用的一些知识点，让大家在掌握了CSS、html、js的基础上，能快速的用vue进行一个页面的开发，毕竟，我们不可能一口吃下一个大胖子，那就从最简单，最软的地方来啃吧。

一：vue实例、data函数
我们要用双向绑定、指令、过滤器这些vue的好东西，就必须先创建一个vue实例，相当于你必须要有一个空间来施展这些 “秘籍” ，否则就算你掌握十八般武艺，也是无从下手，创建vue实例很简单
一个id或者class
引入vue文件，例子中我是通过cdn引入vue.js
new 一个vue实例，把定义好的id【app】添加到vue实例的el属性

image.png

那我们如何检查自己的vue实例是创建成功了呢？
很简单！我们继续添加一个data函数，在里面return出我们的变量，然后在html中使用模版语法{{}}来渲染，在浏览器打开，就可以看到成功渲染了，如果控制台报错，那肯定就是哪个环节出问题了，比如：data没有定义成函数

image.png

ok，这个时候你就可以用正常的class来控制p标签，然后用各种样式来修饰自己的页面～是不是很简单，当标签和data中的变量多起来的时候，你就可以看到一个很棒的web页面

常用的简单指令
设想一下我们常规的页面，是不是经常要对一些元素进行显示隐藏？或者说我们要动态的改变img的src属性？再或者我们要把一个数组直接循环渲染，而不是一个一个的写？是不是想想都很激动～注意：我们的指令必须要使用在一个元素上，也就是标签
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式；指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM**
下面是常用的几个指令，这里我们先讲一下简单的，后续的博客专门针对指令来一篇讲解：

image.png

指令使用的例子：【再次强调，指令必须使用在元素上，或者自定义组件上】
v-if/v-show: 要特别注意后面两个的条件，是我们根据的data里面的变量来判断

image.png

v-model 使用: 还是要看我的v-model对应的值是什么，然后看页面，当我们的input的值改变的时候，p标签中的内容也会随之改变，可不要小看这个属性，这在一些后台管理平台或者是登陆注册等页面，可以少去很多代码，我想你会觉得它是个很可爱的属性的～

image.png
image.png

v-bind: 【缩写 ：】属性绑定，我们以img标签的src属性为例，我们知道通常情况下我们的src都是写死的，可是程序员都是天生的懒汉啊！我们不想获取DOM了，也不想再ajax之后，处理一大堆逻辑之后再获取src再赋值写一大堆代码了，这个时候就很方便咯～
假设我们的data中又一个固定的图片连接

image.png
在这里你只是看到了定义好的一张默认图片，你可以提前幻想一些场景：
当我们的图片为空的时候，是不是可以采用v-if来控制img的显示隐藏？
当我们后面学了生命周期还有方法，这个值是ajax请求回来赋值的情况？
当我们是一个轮播图的时候，你还在写一串div来回翻动？
当我们页面有一个点击事件然后点击改变data中的值的时候，你的图片会发生什么神奇的事情呢？
v-on：【缩写： @】之前的一个问题，当我们有一个元素是可以点击的，比如我们来控制v-if的dataTest的值，那我们的那个v-if该如何呢？这个例子我想大家可以自己试试，然后留言到评论区，如果出错的话，我和胖C也会第一时间回复的～毕竟，看一千遍也不如敲10行代码来的有效果～～～

下一篇预告：基础语法篇【指令，生命周期】

刚开始写的东西会有点简单，以带大家快速入门写项目为主，后面会讲路由、vuex等，请耐心等待啦