Vue小知识，实时更新（常用）

最新推荐文章于 2024-07-24 10:40:52 发布

Sparks550

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量746

点赞数

分类专栏： Vue 常用文章标签：前端 html javascript

本文链接：https://blog.csdn.net/sparks550/article/details/121467797

版权

Vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

常用

5 篇文章 0 订阅

订阅专栏

写在最前面:

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>

Sparks550

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue小知识，实时更新（常用）

写在最前面:layui的作者贤心，去拥抱vue。之前用过vue，即使是基础，也要继续学习，更系统的了解ta，才能更宏观的使用它，更是为了让自己学有所思。1.createApp()和mount()方法讲解<body> <div id="app"></div></body><script> const app = Vue.createApp({}) app.mount("#app")</script>
复制链接

扫一扫

专栏目录