vue基本代码 和 v-cloak，v-text，v-html，v-bind, v-on

1.vue基本代码

1.导入vue的包

 <script src="./lib/vue.js"></script>

 

将来new的vue实例，会控制这个元素中的所有内容

vue实例所控制的这个元素区域，就是我们的 v

  <div id="app">
     <p>  {{ msg }} </p>
  </div>

 

2.创建一个vue的实例

当我们导入包之后，在浏览器的内存中，就多了一个vue构造函数

注意：我们 new 出来的这个 vm 对象，就是我们 MVVM 中的 VM 调度者

这里的 data 就是MVVM 中的 M，专门用来保存 每个页面的数据的

 <script>
        var vm=new Vue({
            el:"#app",   //表示，当前我们new的这个vue实例，要控制页面上的哪个区域
            data:{  //data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue'  //通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不在手动操作dom元素了
                                  【前端的vue之类的框架，不提倡我们手动操作dom元素了】
            }
        })
    </script>

 2.v-cloak，v-text,v-html

使用 v-cloak 能够解决 插值表达式闪烁的问题

   <style>
        [v-cloak]{
            display: none;
        }
    </style>

默认 v-text 是没有闪烁问题的

v-text 会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素的内容清空

    <div id="app">
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题-->
   <p v-cloak>++== {{ msg }}====</p> 
   <h4 v-text="msg">=====</h4>
   <!-- 默认 v-text 是没有闪烁问题的 -->
    <!-- v-text 会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素的内容清空  -->
    <div>{{ msg2 }}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2"></div>
    <!-- v-bind : 是vue中，提供的用于绑定属性的指令 -->
   <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
   <!-- 注意： v-bind：指令可以被简写为 :要绑定的属性 -->
   <!-- v-bind中，可以写合法的JS表达式 -->
   <!-- vue中提供了 v-on: 事件绑定机制 -->
   <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" > -->
   <input type="button" value="按钮" v-on:click="show">
   
</div>

 

v-bind : 是vue中，提供的用于绑定属性的指令

注意： v-bind：指令可以被简写为  : 要绑定的属性

v-bind中，可以写合法的JS表达式  v-bind:title="mytitle + '123'

 vue中提供了 v-on: 事件绑定机制 

   <script src="./lib/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2:'<h1>哈哈，我是h1</h>',
                mytitle:'这是自己定义的title'
            },
            methods:{  //这个methods属性中定义了当前vue实例所有可用的方法
                show:function(){
                    alert('hello')
                }
            }
        })
    </script>

 

 总结：

1.如何定义一个基本的vue代码结构

2.插值表达式 和  v-text 

3.v-cloak

4.v-html

5.v-bind   Vue提供的属性绑定机制  缩写是  ：

6.v-on  Vue提供的事件绑定机制 缩写是 @