VUE 提高开发效率的发展历程:
原生JS->JQuery之类的类库->前端模板引擎->angular
核心概念:解放用户双手 不让用户操作DOM元素
步骤
导入Vue的包
<script src="./js/vue.js"></script>
创建一个Vue实例
<script>
// 当导入包之后,在浏览器的内存中,就多了一个Vue构造函数
var vm=new Vue({
el:'#app',//表示,当前我们new的这个Vue实例要控制页面上的哪个区域
data:{//data属性中,存放的是el中要用到的数据
msg:'欢迎学习Vue'
//通过Vue提供的指令,很方便的就能把数据渲染到页面中
}
})
</script>
显示
<!-- 将来new的Vue实例,会控制这个元素中的所有内容 -->
<!-- Vue实例所控制的这个元素区域,就是我们的v -->
<div id="app">
<p>{{msg}}</p>
</div>
v-cloak
v-cloak 用于解决插值表达式闪烁的问题
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',//表示,当前我们new的这个Vue实例要控制页面上的哪个区域
data:{//data属性中,存放的是el中要用到的数据
msg:'123',
msg2:'<h1>h1标签</h1>'
}
})
</script>
<div id="app">
<!-- v-cloak 用于解决插值表达式闪烁的问题 -->
<p v-cloak>+++++{{msg}}-----</p>
<h4 v-text="msg">======</h4>
<!-- 默认v-text是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 -->
</div>