Vue模板语法

简介: Vue模板语法


一、模板语法

Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中,Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统,当应用状态变更时,Vue 能够智能地推导出需要重新渲染的组件的最少数量,并应用最少的 DOM 操作。

二、插值

2.1 文本

最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):

<div id="app">{{ message }}</div>
  </body>
  <script type="text/javascript">
    new Vue({
    el:'#app',
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    })
  </script>

双大括号标签会被替换为相应组件实例中 message属性的值。同时每次 message 属性更改时它也会同步更新。

2.2 原始 HTML

若想插入 HTML,你需要使用 v-html 指令:

<div v-html='html'></div>
html:'<p style="color:red;">我是红色的Hello Vue</p>'

这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀,表明它们是一些由 Vue 提供的特殊 attribute

2.3 表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式:

<p>表达式</p>
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    //---------------------------------
    data() {
        return {
          message: 'Hello Vue!',
      html:'<p style="color:red;">我是红色的Hello Vue</p>',
      number:5,
      ok:'YES'
        }
      }

2.4 样式绑定

一个是class,一个是style:

.f200{
  font-size: 200px;
    }
<p>样式绑定</p>
<p :class="font" :style="color">{{message}}</p>
color:'color:yellow',
font:'f200'

全部代码:

<!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>
        <style>
        .f200{
          font-size: 200px;
          }
        </style>
  </head>
  <body>
  <div id="app">
    <p>{{ message }}</p>
    <div v-html='html'></div>
    <p>表达式</p>
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <p>样式绑定</p>
    <p :class="font" :style="color">{{message}}</p>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
    el:'#app',
      data() {
        return {
          message: 'Hello Vue!',
      html:'<p style="color:red;">我是红色的Hello Vue</p>',
      number:5,
      ok:'YES',
      color:'color:yellow',
      font:'f200'
        }
      }
    })
  </script>
</html>

三、指令

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令,包括上面我们所介绍的 v-bind 和 v-html。

3.1 v-if/v-else/v-else-if

v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素,他们只能是兄弟元素v-else-if上一个兄弟元素必须是v-if,v-else上一个兄弟元素必须是v-if或者是v-else-if

<body>
  <div id="app">
    <p>v-if/v-else/v-else-if</p>
          分数:<input v-model="score" />
          <div v-if="score>=80">优秀</div>
          <div v-else-if="score>60">良好</div>
          <div v-else="score<60">辣鸡</div>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
    el:'#app',
      data() {
        return {
        score:33
        }
      }
    })
  </script>
()/v-show/v-for/v-bind/v-on/v-model

3.2 v-show

与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style=“display:none”

<p>v-show</p>
      <div v-show="score>=90">牛逼</div>

3.3 v-for

类似JS的遍历,

  • 遍历数组: v-for=“item in items”, items是数组,item为数组中的数组元素
  • 遍历对象: v-for=“(value,key,index) in stu”, value属性值,key属性名,index下标
<p>v-for</p>
            <select v-model="hobbySelected">
              <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
            </select>
            <div v-for="h in hobby">
            <input :value="h.id" type=checkbox />{{h.name}}
            </div>
                    hobby:[
                  {id:"1",name:"唱"},
                  {id:"2",name:"跳"},
                    {id:"3",name:"rap"},
                  {id:"4",name:"篮球"}
                      ],
                  hobbySelected:4

3.4 v-model

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。

<div id="app">
    <button @click="add">count is: {{ count }}</button>
  </div>
    <script type="text/javascript">
    new Vue({
    el:'#app',
      data() {
        return {
      count:0
        }
      },
      methods: {
        add() {
          this.count++
        }
    }
    })
  </script>

四、过滤器

全局过滤器
Vue.filter('filterName', function (value) {
 // value 表示要过滤的内容
});
局部过滤器
new Vue({
 filters:{'filterName':function(value){}}
});
<body>
    <!-- 定义边界 -->
    <div id="app">
      {{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
    </div>
  </body>
  <script type="text/javascript">
    // 全局过滤器
    Vue.filter('all', function(value) {
      return value.substring(1, 4);
    });
    // 绑定边界
    new Vue({
      el: '#app',
      data() {
        return {
          msg:"Java最牛"
        };
      },
      filters:{
        'single':function(val){
          return val.substring(2,3);
        },
        'param':function(val,start,end){
          return val.substring(start,end);
        }
      }
    })
  </script>

五、监听、计算属性

5.1 监听属性

我们可以通过 watch选项 来响应数据的变化

<body>
      <div id="app">
      <p>监听属性</p>
          千米:<input v-model="km" />
          米:<input v-model="m" />
</div>
  </body>
  <script type="text/javascript">
    new Vue({
    el:'#app',
      data() {
      watch:{
        // v指的是m变量
        m: function(v){
          this.km = parseInt(v)/1000;
        },
        // v指的是km变量
        km: function(v){
          this.m = parseInt(v)*1000;
        }
      }
      }
    })
  </script>

5.2 计算属性

计算属性。我们可以使用 computed 选项声明一个响应式的属性,它的值由其他属性计算而来:

<!DOCTYPE html>
<html>
<head>
  <title>购物车</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cartItems" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <div class="quantity-input">
              <button @click="decrementQuantity(item)">-</button>
              <input type="number" v-model="item.quantity" @change="updateSubtotal(item)">
              <button @click="incrementQuantity(item)">+</button>
            </div>
          </td>
          <td>{{ item.subtotal }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总计</td>
          <td>{{ total }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        cartItems: [
          { name: '商品1', price: 10, quantity: 1, subtotal: 10 },
          { name: '商品2', price: 20, quantity: 2, subtotal: 40 },
          { name: '商品3', price: 30, quantity: 3, subtotal: 90 }
        ]
      },
      computed: {
        total: function() {
          return this.cartItems.reduce((sum, item) => sum + item.subtotal, 0);
        }
      },
      methods: {
        updateSubtotal: function(item) {
          item.subtotal = item.price * item.quantity;
        },
        incrementQuantity: function(item) {
          item.quantity++;
          this.updateSubtotal(item);
        },
        decrementQuantity: function(item) {
          if (item.quantity > 1) {
            item.quantity--;
            this.updateSubtotal(item);
          }
        }
      }
    });
  </script>
</body>
</html>

目录
相关文章
|
13天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
28 1
vue学习第四章
|
13天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
26 1
vue学习第九章(v-model)
|
13天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
29 1
vue学习第十章(组件开发)
|
18天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
26 3
|
18天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
37 2
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1054 0
|
18天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
19天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
19天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
19天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。