Vue2——VUE模板语法、数据绑定、el与data的写法

_洋

已于 2024-02-29 20:28:51 修改

阅读量804

点赞数

分类专栏： vue2+vue3 文章标签： vue

于 2022-04-23 16:16:54 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124360420

版权

vue2+vue3 专栏收录该内容

50 篇文章 6 订阅

订阅专栏

文章目录

模板语法
数据绑定
el与data的写法
- el的两种写法
- data的两种写法

模板语法

即html模板块的语法。

插值语法

使用 {{js表达式}}作为vue语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
   <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'jack'
        }

    }); 
    </script>
    
</body>
</html>

输出：
在这里插入图片描述

指令语法

当遇到 ”“中需要填写变量，就不能直接使用插值语法了，会报错。
eg：

 <a href="{{url}}">点我去百度</a>

报错：
在这里插入图片描述
这时就引入了指令语法：指令语法一般以 v-开头

v-bind

在属性名之前使用 v-bind:指令，使用该指令表示该属性的属性值是一个js表达式 ，js表达式会通过vue实例获取值然后再赋值给该属性。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
   <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <a v-bind:href="url">点我去百度</a>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            url:'http://www.baidu.com',
        }
    }); 
    </script>
</body>
</html>

浏览器：
在这里插入图片描述

<a v-bind:href="url">点我去百度</a>:看到v-bind:知道url是一个js表达式，会通过vue实例获取url对应的值http://www.baidu.com，然后再将该值赋给a的href。

简写： v-bind: 可以直接简写成 :

  <a :href="url">点我去百度</a>

v-model

双向数据绑定。双向数据绑定指的是值可以从源码修改影响到页面，而且页面修改也会影响源码数据。
格式：v-model:value="变量名"

<div id="root">
    双向数据绑定：<input type="text" v-model:value="name">
</div>

v-model只能应用于value属性，所以可以简写为：v-model="变量名"

<div id="root">
    双向数据绑定：<input type="text" v-model="name">
</div>

v-on

v-on:当…时候，监听事件触发
如：v-on:click="函数名"：点击的时候执行函数。
函数名后面可以加也可以不加()，如果想要传参数可以添加（），里面填写参数。
但是传参是需要注意一个问题，因为v-on是监听事件所以会有一个默认参数event，所以如果需要传递参数时要写成：v-on:click="函数名($event,参数)"
同时对应的函数要定义如下参数：函数名(event,参数)

eg：

<body>

    <div id="root">
        <h1>欢迎，{{name}}</h1>
        <button @click="showInfo1">点我提示信息</button>
        <button @click="showInfo2($event,12)">点我提示信息</button>
    </div>
    

    <script type='text/javascript'>
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data: {
            name:"yang"
        },
        methods:{
            showInfo1(event){
                // console.log(event.target)
                // 被vue管理的函数不要使用箭头函数
                alert("hello")
            },
            showInfo2(event,number){
                console.log(number)
                alert("hello2")
            }
        }
    })
    </script>
</body>

v-on:click="函数名"可以简写为@click=“函数名”

    <div id="root">
        <h1>欢迎，{{name}}</h1>
        <button @click="showInfo">点我提示信息</button>
    </div>

模板语法的总结

插值语法:
使用情况 :用于解析标签体内容。
( 标签体即起始标签和结束标签之间的内容。如：<h2>标签体</h2>)
插值语法写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法:
使用情况 :用于解析标签（包括:标签属性、标签体内容、绑定事件等)。
标签属性：使用v-bind标签指令
eg：标签属性：
v-bind:href="xxx”或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
eg：

  <a v-bind:href="url.toUpperCase()">点我去百度</a>

则开发者工具显示：
在这里插入图片描述
注意： 指令当然不止有v-bind，还有其他指令，但是形式都是v-????，不同的指令对应不同的功能，此处v-bind就对应标签属性。

对于需要重名的变量，可以设置层级来访问

配置对象中可以无限嵌套对象，一层层嵌套。所以可以在data再嵌套对象，如下：

 data:{
            name:'jack',
            school:{
                name:'百度',
                url:'http://www.baidu.com',
            }
        }

调用 jack 时直接写 name;
调用百度时，写 school.name.
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
   <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr>
        <h2>欢迎来到{{school.name}}</h2>
        <a v-bind:href="school.url.toUpperCase()">点我去百度</a>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'百度',
                url:'http://www.baidu.com',
            }
        }
    }); 
    </script>
    
</body>
</html>

数据绑定

数据绑定也是通过指令实现的。

单向数据绑定——v-bind

单向数据绑定指的是源码数据发生变化，页面数据就跟着发生变化。
但是页面数据的变化不能影响源码数据。
eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">单向数据绑定：<input type="text" v-bind:value="name" /></div>
  </body>

  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: "#root",
      data: {
        name: "百度",
      },
    });
  </script>
</html>

在这里插入图片描述

双向数据绑定——v-model

双向数据绑定指的是值可以从源码修改影响到页面，而且页面修改也会影响源码数据。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        双向数据绑定：<input type="text" v-model:value="name">
    </div>
    
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
    el:'#root',
    data:{
        name:'ceshi'
    }
})

</script>
</html>

在这里插入图片描述

绑定小结

Vue中有2种数据绑定的方式:

单向绑定(v-bind):
数据只能从data流向页面。
简写 :属性="属性值"
双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
简写 v-model="属性值"
备注：

双向绑定一般都应用在表单类元素上(如:input、select等)。
即有value属性的标签，想想如果没有value属性代表不能输入，不能输入又如何使用双向数据绑定呢
v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
eg：

双向数据绑定：<input type="text" v-model="name">

el与data的写法

el的两种写法

vue使用 el指定容器，格式如下
el:容器名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: "#root",
      data: {
        name: "百度",
      },
    });
  </script>
</html>

还有一种写法：
定义变量v接收Vue的值，然后再使用 $mount('容器名')属性指定容器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    const v = new Vue({
      data: {
        name: "百度",
      },
    })
    v.$mount('#root')
  </script>
</html>

data的两种写法

对象式写法

data: {
        属性名: 属性值,
      },

函数式写法，通过返回值将值传出去

data:function(){
          return{
            属性名: 属性值,
          }
      },

可以简写成

      data(){
          return{
            属性名: 属性值,
          }
      },

注：该函数的 this代表的是vue对象。
所以由Vue管理的函数，一定不要写箭头函数，因为箭头函数没有this就会想外找，那么最终会取的this就是window了。

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    const v = new Vue({
      data:function(){
          return{
            name: '百度',
          }
      },
    })
    v.$mount('#root')
  </script>
</html>

_洋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2——VUE模板语法、数据绑定、el与data的写法

文章目录模板语法插值语法指令语法模板语法的总结对于需要重名的变量，可以设置层级来访问数据绑定单向数据绑定——v-bind双向数据绑定——v-model模板语法即html模板块的语法。插值语法使用 {{js表达式}}作为vue语法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板语法</title> <sc
复制链接

扫一扫