在Vue中采用数据驱动页面的思想，我们不用在像JS的DOM操作那样要去操作页面。
要想使用Vue的基础指令，我们先要创建Vue对象，代码：
<div id="box">
</div>
<script>
var vm=new Vue({
el:"#box",//为要操作的元素
data:{
//为我们有需求的数据
}
})
</script>要想在页面渲染出数据有两种方法：1、插值表达式 2、文本指令
插值表达式
写法为：{{JS表达式}}，放在在标签尖括号中使用，只要是符合JS表达式的都可以在{{}}中。
插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名，例如：{{msg}}就对应Vue对象中属性名为msg的值。
练习一下：
<div id="box">
{{msg}}
<!-- 加 -->
{{count+111}}
<!-- 减 -->
{{count-111}}
<!-- 乘 -->
{{count*111}}
<!-- 除 -->
{{count/111}}
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
msg:"111",
count:111,
}
})
</script>页面结果：
总结一下：只要是在data对象中的属性都能够在{{}}中获取到，还有一点我们要知道new Vue()生成的vm对象中有我们在data对象中添加的属性，但是data不等于vm对象。
文本指令
以v-开头，写在标签的属性中。
v-html ==>相当于innerHTML
v-text==>相当于innerText
v-pre==>插件表达式就被识别为文本,而不是js表达式
v-clock==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)
<div id="box">
<div v-html="message"></div>
<div v-text="message"></div>
<div v-pre>{{msg}}</div>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
msg:"111",
count:111,
message:"<h1>111</h1>"
}
})
</script>页面效果：
v-cloak主要用于解决页面第一次加载数据闪烁的问题。
造成闪烁的原因：我们使用插值表达式时，当页面加载的时候是按文档流的顺序加载从上往下，导致{{msg}}这个字符串会显示一下，然后加载到创建vue对象时生成data数据会回去刷新页面，给{{msg}}赋值，即造成了页面数据闪烁的情况。
利用v-cloak解决：在style中通过属性选择器获取v-cloak标签，开始就其display设为none，当生成data数据以后，v-cloak会自动被删掉，标签即显示出来，这时插值表达式也能获取到数据。
代码：
<style>
[v-cloak]{
display: none;
}
</style>
<div id="box">
<div v-cloak>
{{msg+11}}
</div>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
msg:"111",
count:111,
message:"<h1>111</h1>"
}
})
</script>或者我们也可以将插值表达式改为使用文本指令v-html和v-text也避免这个问题，v-html和v-text写在标签属性中，vue对象没有生成时他们没有意义，当生成了以后就会取对应的data数据。注意v-html=""，""内的值也是表达式。
给元素绑定属性
当是双标签时，我们既可以通过v-html或者v-text给页面渲染数据，也可以在标签内通过插值表达式实现。
但是html的标签中，还存在一种单标签，这个时候通过以上的办法就不能办到了，这个时候我们就需要通过属性绑定才能办到。
例如：我们要给img标签的src添加一个资源地址，我们直接将data内的数据传给它，它是识别不到的。这时我们要在src前面加个v-bind:
代码展示：
<div id="box">
<img v-bind:src="url">
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
msg:"111",
count:111,
message:"<h1>111</h1>",
url:"https://ts1.cn.mm.bing.net/th?id=OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
}
})
</script>效果：
v-bind: 用于属性绑定，不仅是对src有用，它对任何标签的属性都有用，只要在标签属性前面加上这个其的属性值不再是字符串了，而是表达式取得vue对象中对应名称的数据。
v-bind：有一个语法糖，可以直接写引号(:)就行了。
说到这里我们来综合练习一下今天的基础指令，模仿新浪的数据写一条假数据渲染到页面
//新浪数据
<script src="./sina.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.5.20/vue.js"></script>
<style>
.toux{
border-radius: 50%;
}
</style>
<div id="box">
<div class="toux">
<img :src="statuses[1].user.profile_image_url" alt="">
</div>
<div class="timer" v-html="statuses[0].created_at"></div>
<div class="text" v-html="statuses[0].text"></div>
</div>
<script>
console.log(sinadata);
// sina=sinadata
new Vue({
el:"#box",
data:sinadata
})
</script>效果：
