Vue(Vue2+Vue3)——5.模板语法

简介: Vue(Vue2+Vue3)——5.模板语法

Vue(Vue2+Vue3)——5.模板语法


首先新建一个页面,写好基本的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    </script>
</body>
</html>


5.1 插值语法


首先是简单的插值语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好,{{name}}</h3>
      <hr/>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'jack'
            }
        })
    </script>
</body>
</html>


5.2 指令语法


首先我们写一个正常的跳转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好,{{name}}</h3>
      <hr/>
      <h1>指令语法</h1>
      <a href="https://www.baidu.com"/>点我去百度1</a>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'jack'
            }
        })
    </script>
</body>
</html>


点击是可以正常跳转到百度的

当然跳转的链接我们不能写死,我们换成插值语法试试

很明显是不行的,而且控制台还报错了,说的是现在不支持这种写法了,应该换种写法

所以我们不用插值语法,换种语法试试,修改代码


v-bind:简单使用


v-bind:动态的给标签属性动态绑定值,把属性的值当做js表达式去执行

使用vue指令 v-bind,这样就那内容当做js表达式去执行了,所以就去去找对应的url变量,也就是我们在vue的data中的值


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好,{{name}}</h3>
      <hr/>
      <h1>指令语法</h1>
      <a v-bind:href="url"/>点我去百度1</a>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'https://www.baidu.com'
            }
        })
    </script>
</body>
</html>

这样我们再试下页面跳转,发现没问题了




v-bind:可以简写:


v-bind:可以简写为:,不是说所有指令都可以简写成一个冒号

<!-- v-bind:正常格式-->
      <a v-bind:href="url" />点我去百度1</a>
      <!-- v-bind:简写成: -->
      <a :href="url" :x='hello'/>点我去百度1</a>

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好,{{name}}</h3>
      <hr/>
      <h1>指令语法</h1>
       <!-- v-bind:正常格式-->
      <a v-bind:href="url" />点我去百度1</a>
      <!-- v-bind:简写成: -->
      <a :href="url" :x='hello'/>点我去百度1</a>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'https://www.baidu.com',
                hello:'12'
            }
        })
    </script>
</body>
</html>


5.3总结


vue模板共有两大类

1 插值语法

功能:用于解析标签体内容,

写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

2 指令语法

功能:用于解析标签(包括标签属性,标签体内容,绑定事件。。。)

举例:v-bind:href="xxx"或简写为:href="xxx",xxx同样要写js表达式

备注:vue中有很多指令,且形式都是v-???,只有v-bind:可以简写为:,此处我们只是拿v-bind举个例子

3 使用场景

插值语法往往指向于标签体内容,标签题就是开始标签和结束标签直接的内容,比如<h1>XXX</h1>

指令语法往往指向于标签属性,


5.4 代码升级解决data中多个相同的key


此时修改代码。我们在data中定义多个相同的key,用于不同的展示

这个时候页面插值都会以最后一个key为准

那么如何解决这个问题呢

第一种:

很简单,我们修改key的名称,把第二个name换成name2,同时修改插值

第二种:使用不同的层级,这种比较第一种就解决方案更加利于维护

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好,{{name}}</h3>
      <hr/>
      <h1>指令语法</h1>
       <!-- v-bind:正常格式-->
      <a v-bind:href="url" />点我去{{school.name}}1</a>
      <!-- v-bind:简写成: -->
      <a :href="Date.now()" :x='hello'/>点我去{{school.name}}</a>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'jack',
                url:'https://www.baidu.com',
                hello:'abc',
                school:{
                    name:'百度'
                }
            }
        })
    </script>
</body>
</html>


相关文章
|
2天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
8 0
|
2天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
10 3
|
5天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
18 0
|
5天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
5天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
16 0
|
5天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
18 0
|
6天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
6天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
6天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
11 0
|
1天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
8 0