Vue.js学习笔记（1）

MVVM框架

• M：保存每个页面中的数据
• V：每个页面中的HTML代码
• VM：一个调度者，分隔了M和V，每当V层想要获取或者保存数据就会通过VM来进行中间的处理来进行数据的存取。
• MVVM提供了数据的双向绑定，由VM提供

声明式渲染

<!--- html --->
<div id="app">
  {{ msg }}//使用插值表达式进行渲染
</div>

<!--- js--->
var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

v-cloak、v-text和v-html

v-cloak 可以解决插值表达式闪烁的问题

<!--- html --->
<div id="app">
  {{ msg }}
</div>
<style>
	[v-cloak]{
		display: none;
	}
</style>

<!--- js--->
var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

v-text 默认没有插值表达式闪烁的问题，并且它会覆盖元素中原本的的内容

<!--- html --->
<div id="app">
	<p v-text="msg">123</p>//最后渲染出来只有msg的内容，没有123
</div>

<!--- js--->
var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

v-html会把msg中的内容编译为html语言来渲染

<!--- html --->
<div id="app">
	<p v-html="msg"></p>//会渲染出h1格式的msg
</div>

<!--- js--->
var app = new Vue({
  el: '#app',
  data: {
    msg: '<h1>Hello Vue!</h1>'
  }
})

v-bind

v-bind：是Vue中提供用于绑定属性的指令，可简写为：

<!--- html --->
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<!--- js--->
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-on

v-on：提供了事件绑定机制，可简写为@

<!--- html --->
<div id="app">
    <input type="button" v-on:click="show" value="点我">
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{
        
    },
    methods:{
        show:function(){
            alert('Hello Vue!')
        }
    }
})