在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:"
111
"
            }
        })
    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:"
111
"
            }
        })
    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:"
111
",
                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>

效果：