目录
1.概述
vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 简单,高效,生态丰富(插件多)
前端的三大框架
(1)Vue
(2)React
(3)Angular
2.应用实例
2.1模板指令
<div id="app">
</div>
2.2创建app
把app里面的内容称为模板
v-开头的属性称为 模板的指令
通过指令把html模板和js联系在一起
.mount("#app")挂载
Vue.createApp({
data() {
return {
msg: "Vue 棒棒哒!"
}
}
}).mount("#app")
3.内置指令
3.1指令
是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式
3.2文本渲染指令
v-text v-html { {msg}}
应用案例
<!-- 把app里面的内容称为模板 -->
<!-- v-开头的属性称为 模板的指令 -->
<!-- 通过指令把html模板和js联系在一起 -->
<div id="app">
<p v-text="msg"></p>
</div>
<script>
Vue.createApp({
data() {
return {
msg: "Vue 棒棒哒!"
}
}
}).mount("#app")
</script>
3.3属性渲染
v-bind
: 简写
代码案例如下
<div id="app">
<p v-bind:title="msg">我是个小p</p>
<p :title="msg">我是个小p</p>
<button :disabled="!canUse">按钮</button>
</div>
<script>
Vue.createApp({
data(){
return {
msg:"我学vue,我骄傲!",
canUse:false,
}
}
}).mount("#app")
</script>
3.4条件渲染