写在最前面:
layui的作者贤心,去拥抱vue。
之前用过vue,即使是基础,也要继续学习,更系统的了解ta,才能更宏观的使用它,更是为了让自己学有所思。
1.createApp()和mount()方法讲解
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({})
app.mount("#app")
</script>
</html>
- createApp():创建一个vue应用
- mount():挂载到某个html的DOM节点上
2.获取和使用根组件
<script>
const app = Vue.createApp({
data() {
return {
message: 'jspang.com' //1.在这里定义了数据,也就是`model`数据
}
},
template: "<h2>{{message}}</h2>" //2.在这里定义了模板,也就是`view`,
//定义后的自动关联,就叫做`vm`,viewModel数据视图连接层。
})
app.mount("#app")
</script>
获取根组件方法
vm.$data.message =‘sparks550’
3.插值表达式{{}},v-once
使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:
<span>Message: {{ msg }}</span>
<span v-once>这个将不会改变: {{ msg }}</span>
4.v-html,用于输出HTML代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
5.v-bind,属性中的值应使用 v-bind 指令
以下实例判断 use 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
6.指令,指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
//这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>