vue 基础指令

vue

概念

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

使用步骤

1. 引入vue.js
2. 创建一个vue实例
   • 当在页面中引入vuejs后，在浏览器中就多出了一个vue构造函数，new出来的vue实例就是中间调度者-vm
3. 讲内容写入页面 这里是MVVM中的view层

基础指令

1. 插值表达式

   插值表达式展示的页面可能会闪烁，使用v-cloak解决

   <p v-cloak>++++{{msg}}+++</p>
   

   

2. v-text指令

   插值表达式不会覆盖原来的内容，v-text会覆盖之前的内容

   <p v-text=msg2>+++++<p>
   

   

3. v-html指令

   v-html按照标签形式解析数据，也会覆盖之前的数据

   <p v-html=msg3>++++++</p>
   

   

上面对应的JS代码如下：

	<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'这是一个消息',
					msg2:'这是另外的数据',
					msg3:'<h1>这是一个标题</h1>'
				}
			})
        </script>