01Vue基本使用与模板语法

最新推荐文章于 2024-07-12 14:10:05 发布
最新推荐文章于 2024-07-12 14:10:05 发布
阅读量81 收藏
点赞数
文章标签： vue js javascript java python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yorickjun/article/details/116645905
版权

Vue基本使用与模板语法

一. 基本使用

  1. Hello World快速入门
说明：
1.实例参数
    el:元素挂载的位置
    data:模型数据
2.插值表达式的用法 {{ }}
    将数据填充到html标签中
    插值表达式支持基本的计算操作 
3.Vue运行原理
    Vue语法----Vue框架---->原生js语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script  src="js/vue.js"></script>
    <script >
        $(function(){
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "Hello World"
                }
            });
        });
    </script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{msg + "----" + 123}}</div>
        <div>{{1 + 2}}</div>
    </div>
</body>
</html>

二. 模板语法

指令

  1. 概述

指令的本质就是自定义属性，格式：以v-开头(例如：v-cloak)

  1. v-cloak指令

解决插值表达式存在闪动的问题。原理：先隐藏表达式的原始内容，替换好值之后再显示最终替换结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script  src="js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <script >
        $(function(){
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "Hello World"
                }
            });
        });
    </script>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
</body>
</html>
  1. v-text,v-html和v-pre指令
说明：
v-text指令：与插值表达式作用基本相同，但是不存在闪动问题且书写比较简单。(测试：若增加过滤器则好像只能用插值表达式)
v-html指令：会填充html片段，但存在XSS攻击问题，访问网站内部可以使用
v-pre指令：会显示原始信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script  src="js/vue.js"></script>
    <script >
        $(function(){
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "Hello World",
                    msgHtml: "<h2>Hello Vue</h2>"
                }
            });
        });
    </script>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-text="msg"></div>
        <div v-html="msgHtml"></div>
        <div v-pre>{{msg}}</div>
    </div>
</body>

</html>
  1. 数据响应式与 v-once指令
说明：
数据响应式：数据的变化会导致网页相应的内容也随之变化，与HTML5中的响应式不同
数据绑定：将数据填充到标签中
v-once指令：只会编译一次，不再具有响应式功能，使得Vue不再监听该数据，提高性能

下述程序，在页面可以通过 vm.msg = 123 将填充msg标签中的值改变，而填充info的标签不会因vm.info = 123 发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="msg"></div>
        <div v-once v-text="info"></div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World",
                info: "Hello Vue"
            }
        });
    </script>
</body>
</html>

双向数据绑定

  1. 概念

双向数据绑定，当页面修改时数据会发生变化，而数据变化页面也会做出相应改变。

  1. v-model指令

通过v-model指令可以实现与数据的双向绑定操作，下述代码当修改input中的内容时，对应的msg数据也会发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="msg"></div>
        <div>
            <input type="text" v-model="msg">
        </div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            }
        });
    </script>
</body>

</html>
  1. MVVM思想
说明：
M：Model
V：View
VM：View-Model
视图与模型相互分离，通过Vue相互关联。视图通过事件监听关联模型。模型通过数据绑定关联视图。

事件绑定

  1. Vue处理事件
说明：
v-on指令
    例： <button v-on:click="num++">点击1</button>
v-on指令的简写 @
    例：<button @click="num++">点击2</button>

点击按钮实现num++的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="num"></div>
        <button v-on:click="num++">点击1</button>
        <button @click="num++">点击2</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }
        });
    </script>
</body>

</html>
  1. 事件函数的调用方式
1.直接绑定函数名称
    例：<button @click="handle">点击1</button>
2.调用函数
    例：<button @click="handle()">点击2</button>

本例通过将num++的操作抽取为函数的形式，绑定的函数需要在Vue的构造的methods属性中声明，另外需要注意在其中的this指向当前Vue对象vm。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="num"></div>
        <button @click="handle">点击1</button>
        <button @click="handle()">点击2</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods:{
                handle: function(){
                    this.num++;
                }
            }
        });
    </script>
</body>

</html>
  1. 事件函数的参数传递
说明：
1.若无需传参则采用第一种直接绑定函数名称的方式更为简单，若需要传参则只能使用第二种调用函数的方式。
2.直接绑定函数名称的方式默认把事件对象(event)作为第一个参数传递。
3.调用函数的方式若要传递事件对象则必须放在最后一个参数的位置传递，并且名称为$event
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="num"></div>
        <button @click="handle1">点击1</button>
        <button @click="handle2(233,666,$event)">点击2</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods:{
                handle1: function(event){
                    console.log(event);
                },
                handle2: function(p1,p2,event){
                    console.log(p1,p2);
                    console.log(event);
                }
            }
        });
    </script>
</body>

</html>
  1. 事件修饰符
说明：用于简化原生js的代码操作，原本需要通过事件对象中的方法调用。另外修饰符可以串联使用。
.stop阻止冒泡
.prevent阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="num"></div>
        <div @click="bundle0">
            <button @click.stop="bundle1">点击</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent="bundle2">百度</a>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods:{
                bundle0:function(){
                    this.num++;
                },
                bundle1:function(event){
                    //传统方法阻止冒泡
                    //event.stopPropagation();
                },
                bundle2:function(event){
                    //传统方法阻止默认行为
                    //event.preventDefault();
                }
            }
        });
    </script>
</body>

</html>
  1. 按键修饰符
说明：
.enter 回车键
.delete 删除键

通过按回车键实现触发表单的提交，通过按delete键实现对用户名输入文本框内容的清除操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form>
            <input type="text" v-on:keyup.delete="clearUname" v-model="uname">
            <input type="password" v-on:keyup.enter="handleSubmit" v-model="pwd">
            <input type="button" value="提交" v-on:click="handleSubmit">
        </form>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                uname: "",
                pwd: ""
            },
            methods: {
                handleSubmit: function(){
                    console.log(this.uname,this.pwd);
                },
                clearUname: function(){
                    this.uname = "";
                }
            }
        });
    </script>
</body>

</html>
  1. 自定义按键修饰符
说明：自定义按键修饰符是自定义的，对应的绑定值为使用事件对象 event.keyCode获取的值
语法：Vue.config.keyCodes.自定义名称 = 事件对象中按键的数值
也可以不定义名称，直接使用按键数值，但不直观

给按键绑定按a的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <input type="text" v-on:keyup.aaa="handle" v-model="info">
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.keyCodes.aaa = 65;
        var vm = new Vue({
            el: "#app",
            data:{
                info: ""
            },
            methods:{
                handle: function(event){
                    console.log(event.keyCode);
                }
            }
        });
    </script>
</body>

</html>

案例

实现加法计算的简单计算器功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>简单计算器</h1>
    <div>
      <span>数值A:</span>
      <span>
        <input type="text" v-model="num1">
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model="num2" v-on:keyup.enter="handle">
      </span>
    </div>
    <div>
      <button v-on:click="handle">计算</button>
    </div>
    <div>
      <span>计算结果:</span>
      <span v-text="result"></span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      简单计算器案例 
    */
    var vm = new Vue({
      el:"#app",
      data:{
        num1:"",
        num2:"",
        result:""
      },
      methods: {
        handle: function(){
          this.result = parseInt(this.num1) + parseInt(this.num2);
        }
      }
    });
  </script>
</body>
</html>

属性绑定

  1. Vue动态处理属性
说明：
1.v-bind指令可以动态绑定属性
    例：<a v-bind:href="url">网页链接1</a>
2.v-bind可以缩写，当把v-bind去掉即为缩写形式
    例：<a :href="url">网页链接2</a>

通过v-bind指令动态绑定a标签的href属性，按键可以动态切换href的属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <a v-bind:href="url">网页链接1</a>
      <a :href="url">网页链接2</a>
      <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                url: "http://www.baidu.com"
            },
            methods: {
                handle: function(){
                    this.url = "http://62.234.149.220";
                }
            }
        });
    </script>
</body>

</html>
  1. v-model的底层实现原理

v-model指令双向绑定的实现是依赖于 v-bind 和 v-on 指令。通过上两个指令可以间接实现双向绑定的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-text="msg"></div>
        <input type="text" v-bind:value="msg" v-on:input="handle">
        <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
        <input type="text" v-model="msg"> 
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            },
            methods: {
                handle: function(event){
                    //将event事件中的value属性动态赋值给msg
                    this.msg = event.target.value;
                }
            }
        });
    </script>
</body>

</html>

样式绑定

  1. class样式处理
说明：
1.对象语法
    例：<div v-bind:class="{active:isActive,error:isError}">测试div</div>
2.数组语法
    例：<div v-bind:class="[activeClass,errorClass]">测试div</div>

通过对象语法控制样式的显示与否，可以通过按键动态控制div的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="{active:isActive,error:isError}">测试div</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isActive: true,
                isError: false
            },
            methods: {
                handle: function(){
                    this.isActive = !this.isActive;
                    this.isError = !this.isError;
                }
            }
        });
    </script>
</body>

</html>

通过数组语法控制样式的显示与否，可以通过按键动态控制div的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass]">测试div</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: "active",
                errorClass: "error"
            },
            methods: {
                handle: function(){
                    this.activeClass = "";
                    this.errorClass = "";
                }
            }
        });
    </script>
</body>

</html>
  1. 样式绑定细节
1.对象绑定和数组绑定可以结合使用
2.class绑定的值可以简化
3.默认的class会保留

实例：div1说明数组和对象绑定可以结合使用，div2说明数组绑定的简化，div3说明对象绑定的简化，div4说明原class会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: aqua;
        }
        .test{
            color: blue;
        }
        .base{
            font-size: large;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass,{test:isTest}]">测试div1</div>
        <div v-bind:class="arrClass">测试div2</div>
        <div v-bind:class="objClass">测试div3</div>
        <div class="base" v-bind:class="[activeClass,errorClass]">测试div4</div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: "active",
                errorClass: "error",
                isTest: true,
                arrClass: ["active","error"],
                objClass: {
                    "active":true,
                    "error":true
                }
            },
        });
    </script>
</body>

</html>
  1. style内联样式处理
对象绑定：
1. <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
2.简化 <div v-bind:style="objStyle"></div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
        <div v-bind:style="objStyle"></div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
               borderStyle: "1px solid red",
               widthStyle: "100px",
               heightStyle: "200px",
               objStyle: {
                   "border": "1px solid green",
                   "width": "200px",
                   "height": "100px"
               }
            },
            methods: {
                handle: function(){
                    this.heightStyle = "100px";
                    this.objStyle.width = "100px";
                }
            }
        });
    </script>
</body>

</html>

分支循环结构

  1. 分支结构
1.v-if
2.v-else-if
3.v-else
4.v-show

v-if与v-show的区别：v-if控制原生是否渲染到页面，而v-show是控制元素是否显示到页面。若要频繁显示和隐藏元素可以考虑使用v-show。

通过分支语句控制输出得分的评价情况，通过按钮控制v-show元素是否显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <div v-if="score>=90">优秀</div>
       <div v-else-if="score>=80">良好</div>
       <div v-else-if="score>=60">及格</div>
       <div v-else>不及格</div>
        
       <div v-show="flag">显示</div>
       <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                score: 30,
                flag: false
            },
            methods: {
                handle: function(){
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>

</html>
  1. 循环结构
  • v-for遍历数组
1.基本用法
    例：<li v-for="item in fruits" v-text="item"></li>
2.遍历时可以顺带获取下标值
    例：<li v-for="(item,index) in fruits" v-text="item+'----'+index"></li>
3.数组为复杂的对象类型可以通过.的方式获取其中的属性
    例：<li v-for="item in objFruits" v-text="item.ename+'----'+item.cname"></li>
4.key的作用可以帮助Vue提升性能
    例：<li :key="item.id" v-for="item in objFruits" v-text="item.ename+'----'+item.cname"></li>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <div>水果</div>
       <ul>
           <li v-for="item in fruits" v-text="item"></li>
           <li v-for="(item,index) in fruits" v-text="item+'----'+index"></li>
           <li :key="item.id" v-for="item in objFruits" v-text="item.ename+'----'+item.cname"></li>
        </ul>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
       var vm = new Vue({
           el: "#app",
           data: {
               fruits: ["apple","banana","orange"],
               objFruits: [
                   {id:1,ename:"apple",cname:"苹果"},
                   {id:2,ename:"banana",cname:"香蕉"},
                   {id:3,ename:"orange",cname:"橘子"}
                ]
           }
       });
    </script>
</body>

</html>
  • v-for遍历对象
基本语法
value:属性值 key:属性名 index:索引
<div v-for="(value,key,index) in obj" v-text="value+'---'+key+'---'+index"></div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <div v-for="(value,key,index) in obj" v-text="value+'---'+key+'---'+index"></div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
       var vm = new Vue({
           el: "#app",
           data: {
               obj:{
                   uname: "yorick",
                   age: 23,
                   address: "BeiJing"
               }
           }
       });
    </script>
</body>

</html>
攻城老湿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
李波的blog，一名喜欢编程和分享技术的研究僧~
04-11 312
文章目录VUE.js基础安装CDN下载安装命令行工具（CLI脚手架）开始使用建议使用的IDE：HBuilderXHello Vue条件与循环处理用户输入Vue实例创建一个vue实例数据与方法模板语法计算属性和侦听器计算属性侦听器class与style绑定绑定HTML Class VUE.js 官方文档：https://cn.vuejs.org/v2/guide/components-props.html 基础 安装 CDN <script src="https://cdn.jsdelivr.net/n
01 Vue基础
lisa2017_的博客
03-18 170
01 Vue基础 一、什么是 Vue 1.简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框 架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方 库（如： vue-router ， vue-resource ， vuex ）或既有项目整合。 2.MVVM 模式的实现者——双向数据绑定模式 MVC： M：model V：view C：Controller MV
vue01-Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 ◆ 基础案例 ◆ Vue常用特性 ◆ 综合案例
weixin_51353891的博客
05-22 363
学习目标： 能够说出Vue的基本用法 能够说出Vue的模板语法 能够说出Vue的常用特性 能够说出Vue的实现案例效果 学习内容： ◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 ◆ 基础案例 ◆ Vue常用特性 ◆ 综合案例 1. Vue概述 尤雨溪：Vue.js的创建者 ⚫ 2014年2月，Vue.js正式发布 ⚫ 2015年10月27日，正式发布1.0.0 ⚫ 2016年4月27日，发布2.0的预览版本 Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理.
Vue基础知识总结 2：vue 动态绑定
热门推荐
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
vue学习-04-动态绑定属性
h1774733219的博客
07-21 118
动态绑定属性：v-bind-xx v-bind-xx可以缩写为 :xx v-bind-style 穿的是一个对象，key为style名称，value为对应的值 data:{ size: '50px' } <h2 :style="{color: 'blue', fontSize: size}">style</h2> v-bind-class 值可以是数组或者对象。对象的key为class名，值为boolean类型：true就表示使用，false就表示不使用 var
Vue概述+基本使用+模板语法.xmind
04-09
Vue概述+基本使用+模板语法.xmind
vue模板语法-插值详解
08-31
插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache 语法（双打括号）来实现的。例如：<span>message:{{msg}}。在上面的例子中，msg 是一个...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
vue jsx 使用指南及vue.js 使用jsx语法的方法
10-19
这与Vue的模板语法类似，但更接近于React的风格。 ### 2. 渲染列表 你可以使用`map`函数来渲染数组中的元素： ```jsx const coms = limit.map(i => <li>{ul}); ``` 这里`limit`是数组，每个元素会被映射为一个`<li>...
详解如何使用webpack在vue项目中写jsx语法
10-19
与模板语法相比，jsx可能更加直观且易于阅读，特别是对于熟悉React的开发者来说。 例如，考虑以下Vue组件的模板和jsx版本： **Vue模板语法：** ```html {{ msg }} ``` **Vue使用jsx：** ```javascript ...
02.Vue3.x绑定数据、绑定html、绑定属性、循环数据
05-12 1445
1.定义数据绑定数据 使用{{}}方式绑定data里面的数据 <!--App.vue--> <template> <div> <h1>{{msg}}</h1> <p>{{userInfo.username}}----{{use<p v-html="html"></p> </div> </template> <script> export defa
动态绑定属性
qq_33879627的博客
09-21 3254
（四）动态绑定属性 4.1 v-bind的基本使用 ​ 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr
01-vue初体验
weixin_42490383的博客
04-15 80
01-helloVuejs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{message}}</h1> <h1>{{name}}</h
vue html 属性绑定,Vue 2 | Part 4 v-bind绑定元素属性和样式
Aysen的博客
06-08 297
这期跟大家分享的，是v-bind指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。绑定属性最简单的例子，我们有一张图片，需要定义图片的src。我们可以直接在元素的属性里面定义： var app = new Vue({el: '#app'});但是在实际工作中，我们通常会遇到的情况是，图片地址是从数据里返回的，这个时候v-bind指令就派上了用场。当然，我们可以同时...
01、Vue.js基础
weixin_42367504的博客
07-13 155
狂神说Vue 1、概述 Vue前端(B站狂神说java) Vue 吸收了 Angular(模块化)和React(虚拟DOM)
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 338
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 161
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 328
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 688
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue基础中的模板语法
04-02
以下是Vue.js模板语法的基本用法： 1. 插值表达式{{}}：用于绑定数据，可以直接在模板中插入JavaScript表达式，如 {{message}} 2. 指令v-bind：用于动态绑定HTML属性，如 <a v-bind:href="url"> {{linkText}} 3....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城老湿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值