Vue学习笔记一

MVC与MVVM之间的区别

MVVM与基本代码

<!-- 将来new的Vue的实例，会控制这个元素中的所有内容 --><!-- Vue实例所控制的这个元素区域，就是我们的V-->
<div id="app">    
    <p>{{msg}}</p>
</div>

引入js文件

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

js文件声明Vue实例

//创建一个Vue的实例//当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数//注意：我们new出来的这个vm对象，就是我们MVVM中的vm调度者
new Vue({    el: '#app', //表示，当前我们new的这个Vue实例，要控制页面上的哪个区域    
//这里的data就是MVVM中的M，专门用来保存每个页面的数据的    
    data: {//data属性中，存放的是el中要用到的数据        
    msg: 'Hello World'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程    序                           员不在手动操作DOM元素了[前端                           
    //的Vue之类的框架，不提倡我们去手动操作DOM元素了 ]    
    }
})

v-cloak,v-text和v-html的使用

<!-- 使用v-cloak能够解决插值表达式闪烁的问题，即网速过慢时的显示问题 -->
<div id="cloak">    
    <p v-cloak>{{cloak}}</p>    
    <!-- 默认v-text是没有闪烁问题的 -->    
    <!-- v-text会覆盖元素中原本的内容，但是插值表达   式只会替换自己的这个占位符，不会把整个元素的内容清空 -->    
    <h3 v-text="cloak"></h3>    
    <!-- 解析html的标签 -->    
    <div v-html="cloakHtml"></div>
</div>

vue实例

new Vue({    
    el: '#cloak',    
    data:{        
        cloak: 'Hello World',        
        cloakHtml: '<h1>带标签的内容</h1>'    
    }
})

v-bind的使用

<!-- v-bind：是Vue中，提供的用于绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="myTitle"/>
<!-- 注意： v-bind: 指令可以被简写为 : 要绑定的属性 -->
<!-- v-bind中，可以写合法的js表达式 -->
<input type="button" value="按钮" :title="myTitle + '自定义的字符串拼接'"/>

data:{    
    cloak: 'Hello World',    
    cloakHtml: '<h1>带标签的内容</h1>',    
    myTitle: '这是一个自定义的内容'
    }

v-on的使用

<!-- vue中的v-on: 提供了时间绑定机制 缩写@ -->
<input type="button" value="按钮" v-on:click="show" />
<input type="button" value="按钮" v-on:mouseover="mouseShow" />

//methods属性中定义了当前Vue实例所有可用的方法
methods: {    
    show:function () {        
        alert("hello");
     },    
    mouseShow:function () {        
        alert("world");   
    }
}