Vuejs基础语法

最新推荐文章于 2025-02-28 16:04:29 发布
原创 最新推荐文章于 2025-02-28 16:04:29 发布 · 999 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #html #js
本文详细介绍了Vuejs的基础知识，包括项目入门、列表展示、计数器实现、插值操作、动态绑定属性、计算属性和事件监听。通过实例代码展示了如何使用Mustache语法、v-once、v-html、v-text、v-pre和v-cloak指令，以及v-bind和v-for的用法。此外，还涵盖了条件判断、用户登录切换案例、循环遍历和书籍购物车案例，帮助读者深入理解Vuejs的核心概念。

Vuejs学习方案

Day01

01-项目入门方案

01-HelloVuejs

通过入门方案了解Vue代码编写，掌握基本的Vue编码格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>
</div>
    <!-- 下载到本地项目文件夹，引入vue.js-->
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'Hello',
                name:'Vuejs'
            }
        })
    </script>
</body>
</html>

​ 【运行结果展示】
在这里插入图片描述

02-Vue列表展示

通过列表展示，了解在vue框架下如何进行列表循环展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['肖申克的救赎','星际穿越','流浪地球','盗梦空间']
        }
    })
</script>
</body>
</html>

​ 【运行结果展示】

在这里插入图片描述

03-计数器

了解如何在页面监听一个事件，合理设置事件绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button @click="add">+</button> <!--@ 是 语法糖 是一种简写-->
    <button @click="sub">-</button>
</div>


<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add:function () {
                console.log("+被执行");
                this.counter++;
            },
            sub:function () {
                console.log("-被执行")
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

​ 【运行结果展示】

在这里插入图片描述

02-插值操作

1、Mustache语法

双大括号语法，数据是响应式的。

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}},123</h2>
<!--  Mustache语法中可以写简单的表达式！-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}}{{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

Mustache语法中可以写简单的表达式！

2、v-once指令

该指令表示元素和组件只渲染一次，不会跟随数据的改变而改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！'
    }
  })
</script>
</body>
</html>

​ 【控制台修改操作】

在这里插入图片描述

修改app.message的值，第一个无v-once属性的h2标签被修改，第二个有v-once属性的h2标签没有被修改。

3、v-html指令

从服务器请求到的数据本身是一个HTML代码，需要解析并展示出HTML。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-html="url">{{url}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！',
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>
</body>
</html>

​ 【页面展示】

在这里插入图片描述
在这里插入图片描述

4、v-text指令

将数据显示在界面中，v-text通常情况下接受一个string类型。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{message}},123</h2>
  <h2 v-text="message">123</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！'
    }
  })
</script>
</body>
</html>

​ 【页面分析】

在这里插入图片描述

5、v-pre指令

用于跳过这个元素和它的子元素的编译过程，用于显示原本标签内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！'
    }
  })
</script>
</body>
</html>

​ 【界面分析】

在这里插入图片描述

6、v-cloak指令

在某些情况下，浏览器会显示出未经编译的Mustache标签，这时会影响用户浏览体验，需要进行隐藏处理。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊！'
      }
    })
  },1000)
</script>

</body>
</html>

​ 【界面分析】

在这里插入图片描述

Day02

01-动态绑定属性

01-v-bind的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  <img v-bind:src="imgURL" alt="" >-->
<!--  <a v-bind:href="aHref">百度一下</a>-->
<!--  语法糖写法（简写）-->
  <img :src="imgURL" alt="" >
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！',
      imgURL:'https://img-blog.csdnimg.cn/2020032810351598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Vsc2ExNQ==,size_16,color_FFFFFF,t_70',
      aHref:'http://www.baidu.com'
    }
  })
</script>
</body>
</html>

​ 【界面展示】
在这里插入图片描述

02-v-bind动态绑定class对象语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
<!--  <h2 class="active">{{message}}</h2>-->
<!--  <h2 :class="active">{{message}}</h2>-->
  <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！',
      isActive:true,
      isLine:true
    },
    methods: {
      btnClick:function () {
        this.isActive = !this.isActive
      }
    }
  })
</script>
</body>
</html>

​ 【界面展示及分析】

在这里插入图片描述

03-v-bind动态绑定class数组语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active,line]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！',
      active:'11111',
      line:'222222'
    }
  })
</script>

</body>
</html>

​ 【界面展示】

在这里插入图片描述

04、v-bind动态绑定style对象语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  <h2 :style="{'font-size':'50px'}">{{message}}</h2>-->
  <h2 :style="getStyle()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message: '你好啊！',
      finalSize: 100,
      finalColor: 'red'
    },
    methods:{
      getStyle:function () {
        return {'font-size': this.finalSize + 'px',backgroundColor: this.finalColor }
      }
    }
  })
</script>

</body>
</html>

​ 【界面展示】

在这里插入图片描述

05 小作业 （v-for和v-bind的结合）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="(item,index) in movies" @click="liClick(index)"
        :class="{active:currentIndex === index}">
      {{index}}-{{item}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
      currentIndex: 0
    },
    methods:{
      liClick(index){
        this.currentIndex = index;
      }
    }
  })
</script>
</body>
</html>

​ 【页面展示】

在这里插入图片描述

02-计算属性

01-计算属性的基本使用

<div id="app">
  <h2>{{firstName + ' ' + lastName}}</h2>
<!--  方法-->
  <h2>{{getFullName()}}</h2>
<!--  计算属性-->
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      firstName:'Lebron',
      lastName:'James'
    },
    computed:{
      fullName:function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods:{
      getFullName:function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

方法需要加上括号，本质是一个函数，而计算属性不需要加括号。

02-计算属性的复杂操作

使用计算属性来计算图书总价格，

<div id="app">
  <h2>总价格:{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      books:[
        {id:110,name:'Linux编程艺术',price:119},
        {id:111,name:'代码大全',price:105},
        {id:112,name:'深入理解计算机原理',price:96},
        {id:113,name:'现代操作系统',price:87}
      ]
    },
    computed:{
      totalPrice:function () {
        let result = 0;
        for (let i=0;i<this.books.length;i++){
          result += this.books[i].price;
        }
        return result
      }
    }
  })
</script>

03-事件监听

01-v-on的基本使用

<div id="app">
  <h2>{{counter}}</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter&#45;&#45;">-</button>-->
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
<!--  语法糖的写法-->
<!--  <button @click="increment">+</button>-->
<!--  <button @click="decrement">-</button>-->

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter:0
    },
    methods:{
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      }
    }
  })
</script>

​ 【页面展示】

在这里插入图片描述

02-v-on的参数问题

  • 当通过methods中定义方法，以供@click调用时，需要注意的参数问题：

  • 情况一：如果该方法不需要额外参数，那么方法后的括号可以不添加。

    但是注意：如果方法本身中有一个参数，那么会默认原生事件event参数传递进去

  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

03-v-on修饰符
  • 1、.stop 停止冒泡
  • 2、 .prevent 阻止默认行为
  • 3、 .keyCode 只当事件是特定键触发时才触发回调
  • 4、 .native 监听组件根元素的原生事件
  • 5、 .once 只触发一次回调

04-条件判断

01-v-if、v-else-if、v-else的使用

<div id="app">
<!--  方式1-->
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>
<!--  方式2-->
  <h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      score: 99
    },
    computed:{
      result(){
        let showMessage = '';
        if(this.score >= 90){
          showMessage = '优秀'
        }else if (this.score >= 80){
          showMessage = '良好'
        }else if (this.score >= 60){
          showMessage = '及格'
        }else {
          showMessage = '不及格'
        }
        return showMessage
      }
    }
  })
</script>

​ 【页面展示】

在这里插入图片描述

02-用户登录切换案例

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
     isUser:true
    }
  })
</script>

​ 【页面展示】

在这里插入图片描述

05-循环遍历

01-v-for遍历数组

<div id="app">
<!--  在遍历过程中没有使用索引值（下标值）-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
<!--  在遍历过程中获取索引值-->
  <ul>
    <li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      names:['123','456','789']
    }
  })
</script>

​ 【页面展示】

在这里插入图片描述

02-v-for遍历对象

<div id="app">
  <ul>
    <li v-for="(value,key) in info">{{key}}:{{value}}</li>
  </ul>
  <ul>
    <li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      info:{
        name:'123',
        age:18,
        height:1.88
      }
    }
  })
</script>

​ 【页面展示】

在这里插入图片描述

03-响应式的数组方法

  • 1、push() 尾部插入元素（可多个）

    this.letters.push("123","456");

  • 2、pop() 尾部删除元素

    this.letters.pop();

  • 3、shift() 头部删除元素

    this.letters.shift();

  • 4、unshift() 头部插入元素（可多个）

    this.letters.unshift("123","456");

  • 5、splice() 删除/插入/替换元素

    删除：

    this.letters.splice(1,2);//表示删除第一个元素的后面两个元素

    插入：

    this.letters.splice(1,0,"1","2","3");//表示在第一个元素后插入“1”，“2”，“3”这三个元素值

    替换：

    this.letters.splice(1,2,"1","2");//表示用“1”和“2”依次替换第一个元素后面的两个元素

  • 6、sort() 排序

    this.letters.sort();

  • 7、 reverse方法 顺序反转

    this.letters.reverse();

06-书籍购物车案例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div id="app">
<div v-if="books.length">
  <table>
    <thead>
    <tr>
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in books">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
      <td>{{item.price | showPrice}}</td>
      <td>
        <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
        {{item.count}}
        <button @click="increment(index)">+</button>
      </td>
      <td><button @click="removeHandle(index)">移除</button></td>
    </tr>
    </tbody>
  </table>
  <h2>总价格：{{totalPrice | showPrice}}</h2>
</div>
  <h2 v-else>购物车为空</h2>
</div>


<script src="../js/vue.js"></script>
<script src="main.js"></script>

</body>
</html>

main.js

const app = new Vue({
  el: '#app',
  data:{
    books:[
      {
        id:1,
        name:'《算法导论》',
        date:'2006-9',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:'《UNIX编程艺术》',
        date:'2006-2',
        price:59.00,
        count:1
      },
      {
        id:3,
        name:'《编程珠玑》',
        date:'2008-10',
        price:185.00,
        count:1
      },
      {
        id:4,
        name:'《程序员教程》',
        date:'2006-9',
        price:35.00,
        count:1
      }
    ]
  },
  methods:{
    increment(index){
      this.books[index].count++;
    },
    decrement(index){
      this.books[index].count--;
    },
    removeHandle(index){
      this.books.splice(index,1)
    }
  },
  computed:{
    totalPrice(){
      let totalPrice = 0;
      for(let i = 0; i<this.books.length;i++){
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice
    }
  },
  filters:{
    showPrice(price){
      return '￥' + price.toFixed(2)
    }
  }
})

style.css

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

​ 【项目展示】
在这里插入图片描述
记得收藏啊😀😄

Vue.js-基础语法
hxy1625309592的博客
04-24 286
1.1 v-on指令 基本特点 作用：绑定事件监听器 缩写：@ 预期：Function | Inline Statement | Object 参数：event 1.1.1 v-on的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的基本使用(监听事件)</title> </head> <body&
Vue.js语法详解：从入门到精通
m0_55416028的博客
03-23 2003
本文介绍了Vue.js的一些核心概念和语法，包括组件、模板、数据绑定、计算属性、生命周期钩子和指令。指令以`v-`开头，后面跟着指令的名称，例如`v-if`、`v-for`和`v-bind`。在本文中，我们将深入探讨Vue.js的语法，帮助读者更好地理解和应用Vue.js。如果你想深入学习Vue.js，可以查看官方文档或者其他相关资料，这些资源可以帮助你更好地掌握Vue.js的知识。在上述示例中，我们定义了一个简单的Vue.js组件，并在该组件中使用了常见的生命周期钩子。关注我，持续分享更多优质好文！
Vue.js基础语法(一）
爱读书的二丙子的博客
06-03 959
初识Vue.js 1. 简介 1. 1 传统网页开发步骤 1.2 传统网页开发的问题 1.3 什么是Vue.js Vue是一种前端流行框架，更多内容参考官网 2. Vue.js核心特性 数据驱动视图：数据变化会自动更新到对应元素中，无需手动操作DOM。 单向数据绑定：数据变化导致视图变化 双向数据绑定：输入框等可输入元素，实现了数据和元素内容的双向绑定。 MVVM模型 Model View ViewModel 数据驱动视图的优缺点 解放DOM操作 View与Mo
Vue.JS 基础语法+案例
m0_57067025的博客
03-08 924
v-html //以html代码的形式解析传入datav-show //以控制display：none来控制显示隐藏v-if //基于条件判断以创建元素节点来控制显示隐藏v-else v-else-if //条件判断v-on //添加监听+提供处理逻辑 可替换为@v-bind //动态设置标签属性 简写：v-for //循环，多次渲染整个元素v-model //数据和视图双向数据绑定v-bind //class 样式控制
vue js基础语法
weixin_58286934的博客
09-30 751
什么是vue vue是目前前端主流的js框架，它和库的区别在于： 库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库; 框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。 当前主流的前端框架除了Vue还有React、Angular Vue有什么优势 Vue.js是一套
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8804
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
vue.js 拷贝数组和对象_Vuejs基础语法(二)
weixin_39609503的博客
11-25 170
点击上方蓝字，关注我们前言承接上篇笔记Vuejs基础语法(一)，接下去要记录的这些指令比较常用01v-bind 动态绑定属性除了内容需要动态决定外，有些属性也是需要动态来绑定 比如：动态的绑定a元素的href属性动态的绑定img元素的scr属性动态绑定class类、style样式等所以需要用到v-bind指令：作用：动态绑定属性缩写：: (英文的冒号)举个栗子：通过Vue实例中的dat...
vue学习资料：vue笔记ppt整理(vue基础指令&vue基础语法)
南北极之间
07-01 9265
vuejs基础语法： ...
Vue2基础语法
lea4ning的博客
05-07 2914
Vue2基础语法【插值语法 指令 事件 事件修饰符 条件渲染 遍历渲染 变更方法 checkbox和radio 】
vue.js语法学习
qq_35389092的博客
10-24 201
VUE基本语法学习
Vue | Vue.js 基础 模版语法
CoderHing的博客~
10-22 3252
Vue基础知识点 模版语法的使用
Vue.js 学习心得与语法总结
2401_82357513的博客
12-13 1652
插值表达式：使用双大括号{{ }}将数据绑定到 HTML 模板中，能够方便地展示数据。，其中message是 Vue 实例中的数据属性。指令绑定v-bind：用于绑定 HTML 属性，可以缩写为。或者，将imageUrl数据绑定到img标签的src属性上。v-model：主要用于表单元素的数据双向绑定，如，当用户在输入框中输入内容时，inputValue的值会自动更新，反之亦然。
Vue.js基本语法上
2301_76988707的博客
09-19 407
插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段" 结果： v-html专门用来展示数据, 其作用和插值表达式类似但可以避免插值闪烁问题。当网速比较慢时, 使用{{}
Vue.js 基础语法插值语法、指令语法、v-bind 指令、v-model 指令以及用户片段的配置
最新发布
奋斗的小前端
02-28 1220
本文主要介绍了 Vue.js 的基础语法，包括插值语法、指令语法、v-bind 指令、v-model 指令以及用户片段的配置。这些内容是 Vue.js 开发的基础，帮助开发者快速上手 Vue 项目，实现动态数据绑定和视图更新。
Vue.js语法
weixin_51186587的博客
07-15 233
1.插值操作 1.mustache语法(双大括号) 不仅仅可以写变量，还可以写简单的表达式 2.v-once指令 该指令后面不需要跟任何表达式 该指令表示元素和组件只渲染一次，不会随着数据改变而改变 3.v-html 用于请求到的数据是html代码，但我们希望的是按照html格式进行解析，并显示对应的内容 该指令后面往往会跟上一个string类型 代码示例 <div id="app"> <h1 v-html='url'></h1> </div
vue模板语法上
m0_52681702的博客
10-29 256
一、插值 1、文本{{msg}} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </he...
第二章 Vue.js 基础语法
小北呱的博客
06-03 512
第二章 Vue.js 基础语法 2-1 第一个 Vue.js 案例_HelloWorld <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入vuejs框架 --> <script src="./lib/vue-2.4.0.js"></sc
b站黑马的Vue快速入门案例代码——计数器
weixin_72322475的博客
12-12 2220
b站黑马的Vue快速入门案例代码——计数器
vue实现计数器
qq_46112274的博客
10-31 6046
vue实现计时器1、简单实现计数器2、vue方法实现计数器 1、简单实现计数器 <div id="app"> <h2>当前计数：{{counter}}</h2> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> </div> <script src="../js/vu
Vue.js的基本语法
H_sen's Blog
04-12 860
Vue是一个 MVVM 的框架，数据驱动和 组件化是Vue的核心思想。 简单的讲MVVM框架就是：我们只需要在数据层做数据操作，显示层会检测到我们每次的数据变化，然后做出相应的改变，监测数据这个工作就是中间的ViewModel。通 过这种模式，我们就可以不用再直接操作DOM节点来进行数据的改变。 插值 在模板里可以实现data数据的展示，如果data数据改变，展示的数据也会响应式的改变。响应式的改...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值