Vue基础（day01）

vue基本代码结构

            var vm = new Vue({
                el : '#app',//表示，当前new的 Vue 实例，要控制页面上的那个区域
                //这里的data就是MVVM中的M,专门用来保存每个页面的数据
                data : { //data属性中，存放的是el中要用到的数据
                    msg : '欢迎学习！' ,//通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不在手动操作dom元素了。
                }
            });

vue插值表达式、v-cloak、v-text、v-html

        <div id="app">
            <!-- 使用v-clock能够解决表达式闪烁的问题 -->
            <p v-cloak>{
  {msg}}---------</p>
                <!-- {
   {}} 这就是插值表达式 -->
            <h4 v-text="msg">--------</h4>
            <!-- 默认v-text 是没有闪烁问题的 -->
            <!-- v-text会覆盖元素原本的内容，但是 插值表达式 指挥替换自己的这个占位符，不会把整个元素的内容全部替换掉 -->
            
            <div>{
  {msg2}}</div>
            <div v-text="msg2"></div>
            <!-- v-text跟插值表达式差不多，但是插值表达式只会替换占位符，不会把整个元素内容全部替换掉！但是v-text就会将整个元素内部的问题全部替换掉 -->
            <div v-html="msg2">
                123
            </div>
            <!-- v-html会直接替换整个元素内部的东西，并且输出为html -->
            
        </div>
        <script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
    
                el:'#app',
                data:{
    
                    msg : '123',
                    msg2 : '<h1> hha,我是一个大大的h1<h1>'
                }
            })
        </script>

• v-text ：它替换了插值表达式，但是它会替换元素整个内容。
• v-html ：它会将内容输出为html格式！
• v-clock ：能够解决表达式闪烁的问题。

Vue中v-bind

            <input type="button" value="按钮" v-bind:title="mytitle + '123'" />
            <!-- v-bind: 是vue中，提供的用于绑定属性的指令 -->
            <!-- 注意：v-bind：指令可以被简写为：要绑定的属性 -->
            <!-- v-bind中，可以写成合法的JS表达式 -->

• v-bind Vue提供的属性绑定机制 缩写是 :
• v-bind 在绑定的时候，拼接绑定内容： :title = “btnTitle + ‘,这是追加的内容’”

Vue中v-on

        <!-- vue中提供了v-on：事件绑定机制 -->
        <input type="button"  value="按钮" v-on:mouseover="show" />
        <script type="text/javascript">