Vuejs基础语法

最新推荐文章于 2023-03-23 09:32:43 发布
最新推荐文章于 2023-03-23 09:32:43 发布
阅读量825 收藏
点赞数
分类专栏： Vuejs 文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gets_s/article/details/113746664
版权

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;
}

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

小狐狸梦想去童话镇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js-基础语法
hxy1625309592的博客
04-24 201
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语法基础（一）
Jiang_29k的博客
12-02 277
这是vue学习笔记之一，按照自己的思路和理解记得，所以有点乱，如果有疑义或问题的话，欢迎在下方提问相应问题留言~ 基础语法 < div id=”app”> < li v-for = “item in list”> {{item}}</ li> // 将会把两个li的内容按照列表的形式显现，这种语法结构叫做插值表达式，{{}}双大括号会将数据解释为普通文本，而非H...
Vue.js的基本语法
H_sen's Blog
04-12 664
Vue是一个 MVVM 的框架，数据驱动和 组件化是Vue的核心思想。 简单的讲MVVM框架就是：我们只需要在数据层做数据操作，显示层会检测到我们每次的数据变化，然后做出相应的改变，监测数据这个工作就是中间的ViewModel。通 过这种模式，我们就可以不用再直接操作DOM节点来进行数据的改变。 插值 在模板里可以实现data数据的展示，如果data数据改变，展示的数据也会响应式的改变。响应式的改...
Vue.js基础语法(一）
爱读书的二丙子的博客
06-03 842
初识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必读文章
CS_DGD的博客
01-18 191
Vue.js 简介 传统网页开发步骤 请求数据 生成结构 监听变化 元素变化 发送请求 更新结构 传统网页开发弊端 DOM 操作频繁，代码繁杂 DOM 操作与逻辑代码混合，可维护性差 不同功能区域书写在一起，可维护性低 模块之间的依赖关系复杂 Vue.js 是什么 前端流行框架 Vue.js 核心特性 数据驱动视图 组件化开发 数据驱动视图 数据变化会自动更新到对于元素中，无需手动操作 DOM，这种行为称做单向数据绑定 对于输入框等可输入元素，可设置双向数据绑定 双向数据绑定是在数据绑定
Vue.js基础语法
lei_1994的博客
01-24 505
在实际操作中建议定义全局id 即在body标签中给定，不要重复使用new Vue 第一次测试Vue.js --> .class1{ background: #666; color: #fff; } {{ messagefirst }} 修改颜色
VueJS 基础
05-03
在本文中，我们将深入探讨VueJS的基础知识，包括其核心概念、基本语法以及如何使用VueJS进行实际开发。 1. 数据绑定：VueJS的数据绑定是基于MVVM（Model-View-ViewModel）模式的，通过`v-bind`指令将数据模型与视图...
Vuejs（一）：Vuejs模板语法
11-10 885
Vuejs（一）：Vuejs基础语法一：vuejs介绍 一：vuejs介绍 Vue (读音 /vjuː/，类似于 view) Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样...
vuejs语法攻略参考.pdf
12-26
一、基础语法 Vue 实例化时，我们使用 `new Vue()`，其中 `el` 参数指定Vue实例作用的DOM元素，通常是页面中的一个ID。`data` 用于定义实例的数据对象，它是一个包含初始数据的JavaScript对象。例如： ```javascript...
VueJS基础：YT Baledemy 70部分的学习框架Vue JS
02-11
在"VueJS基础：YT Baledemy 70部分的学习框架Vue JS"这个课程中，你将深入学习Vue的核心概念和基本用法。以下是基于VueJS和HTML的相关知识点： 1. **Vue实例**：Vue实例是Vue应用的起点，通过`new Vue()`创建。它...
vue.js入门教程之基础语法小结
10-21
在这个“vue.js入门教程之基础语法小结”中，我们将深入探讨Vue.js的基本语法，帮助初学者快速掌握其核心概念。 1. 插入文本 在Vue中，我们可以使用双大括号`{{ }}`来插入文本。例如，`<span>Message: {{ text }}...
Vue.js 基础语法
wang_zhao_的博客
04-18 1636
二、Vue.js 基础语法1.1 插值文本 1.1 插值 文本        数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
vue.js基本语法
bird_tp的博客
11-08 2450
Vue.js的指令是以v-开头的 1.v-if: v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下： v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。 2.v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它...
Vue | Vue.js 基础 模版语法
CoderHing的博客~
10-22 3090
Vue基础知识点 模版语法的使用
Vue.js语法详解：从入门到精通
最新发布
m0_55416028的博客
03-23 1713
本文介绍了Vue.js的一些核心概念和语法，包括组件、模板、数据绑定、计算属性、生命周期钩子和指令。指令以`v-`开头，后面跟着指令的名称，例如`v-if`、`v-for`和`v-bind`。在本文中，我们将深入探讨Vue.js的语法，帮助读者更好地理解和应用Vue.js。如果你想深入学习Vue.js，可以查看官方文档或者其他相关资料，这些资源可以帮助你更好地掌握Vue.js的知识。在上述示例中，我们定义了一个简单的Vue.js组件，并在该组件中使用了常见的生命周期钩子。关注我，持续分享更多优质好文！
第二章 Vue.js 基础语法
小北呱的博客
06-03 405
第二章 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
vue.js 拷贝数组和对象_Vuejs基础语法(二)
weixin_39609503的博客
11-25 98
点击上方蓝字，关注我们前言承接上篇笔记Vuejs基础语法(一)，接下去要记录的这些指令比较常用01v-bind 动态绑定属性除了内容需要动态决定外，有些属性也是需要动态来绑定 比如：动态的绑定a元素的href属性动态的绑定img元素的scr属性动态绑定class类、style样式等所以需要用到v-bind指令：作用：动态绑定属性缩写：: (英文的冒号)举个栗子：通过Vue实例中的dat...
【Vue】 基础语法
小数点儿_
03-16 1017
目录错误路径组件钩子函数props 属性computed 计算属性mixins 混入属性watch 监听属性指令v-on 指令v-bind 指令v-model 指令自定义指令样式绑定classstylerouter 路由响应式系统reactiverefAjax(axios) Vue3 教程 Vue3 教程 官网 Vue3 入门指南与实战案例 vue create 名称 cd 所在文件夹 npm run serve 在浏览器中打开提供的网站 在index.html编写，每次保存网站都会更新 <!--
探索Vue 2.0：MVVM组件与基础语法详解
本文档深入探讨了Vue.js这款现代JavaScript框架的基础语法和常用指令，针对MVVM（Model-View-ViewModel）设计模式进行详细解读。MVVM是一种前端开发模式，通过将数据模型（Model）、视图（View）和视图模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值