vue模板语法(上集)

简介: vue模板语法(上集)

为什么要用Vue模板语法

Vue模板语法是Vue.js框架的一部分,使用它有以下几个优点:

  1. 简化了HTML代码编写:Vue模板语法支持简化HTML标签和属性的写法,使得代码更加简洁易读,提高开发效率。
  2. 数据绑定:Vue模板语法支持数据双向绑定,可以将数据自动更新到对应的DOM元素,从而避免了手动操作DOM的麻烦。
  3. 条件渲染:Vue模板语法支持条件渲染,可以根据特定条件来渲染特定的内容,从而提升用户体验。
  4. 循环渲染:Vue模板语法支持循环渲染,可以根据特定的数据进行循环渲染相同结构的元素,从而避免了重复编写代码的麻烦。 综上所述,Vue模板语法简化了HTML代码编写,提供了数据绑定、条件渲染、循环渲染等功能,使得Vue.js开发更加高效、可维护和易于扩展。

插值

插值不仅可以显示数据和JavaScript表达式,还可以显示Vue.js指令、事件和组件等内容,可以帮助开发者更加方便地操作数据和DOM元素,提高开发效率和代码可读性。


需要注意的是,Vue模板语法插值只是一种数据绑定的方式,插值中的内容必须是一些安全的文本,不能够包含HTML标签或其他恶意代码,否则会出现安全问题。对于需要渲染HTML标签的内容,应该使用Vue.js提供的v-html指令

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>插值</title>
    <style type="text/css">
      .f30{
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <!-- 定义vue所管理的边界,有且只有一个根节点 -->
    <div id="app">
      <p>文本</p>
      {{msg}}
      <p>html解析</p>
      {{msg2}}<br>
      <b :class="msg3"  v-html="msg2"></b>
      <p>表达式</p>
      {{mun+1}}
      {{warn.substr(0,2)}}
      <input v-model="ok" />
      {{ok?'成功了':'失败了'}}
    </div>  
    <script type="text/javascript">
    new Vue({
      el:"#app",
      data(){
        return{
          msg:'hello  小B 你相信光吗?',
          msg2:'<span style="color:yellow">hello 小B</span>',
          msg3:'f30',
          num:6,
          warn:'听到我的招换了吗?',
          ok:true
          };
      }
    });
    </script>
  </body>
</html>

ddfedb597a9c4b9f902eb0070f038baf.png

指令

上述只是常用的一些指令,Vue.js还提供了很多强大的指令和功能,可以根据实际需要选择合适的指令使用。同时需要注意的是,在使用Vue指令时需要遵守Vue的规范,正确使用Vue指令才能发挥出它的优点,提高开发效率和代码质量。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>指令</title>
  </head>
  <body>
    <div id="app">
      <p>v-if/v-else-if/v-else</p>
    <input v-model="score"/><br />
    <b v-if="score < 60">不及格</b>
    <b v-else-if="score>60 && score< 70">及格</b>
    <b v-else-if="score>70 && score< 80">一般</b>
    <b v-else-if="score>80 && score< 90">良好</b>
    <b v-else="">优秀</b>
    <!-- 60以下 不及格
    60-70  及格
    70-80  一般
    80-90  良好
    90以上  优秀 -->
    <p>v-show</p>
    v-if 与v-show的区别?<br>
    <b v-if="isShow">展示</b>
    <b v-show="isShow">展示</b>
    <p>v-for</p>
    <i v-for="a in arr">{{a}}&nbsp;&nbsp;</i>
    <i v-for="i,u in users">{{u.name}}&nbsp;&nbsp;{{i}}</i>
    <select>
      <option v-for ="h in hobby" :value="h.id">{{h.name}}</option>
    </select>
    <div id=""  v-for="h in hobby">
      <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}}
    </div>
    <p>动态参数</p>
    <input v-model="evname" />
    <button v-on:[evname]="test">点我</button>
    </div>
    <script type="text/javascript">
    new Vue({
      el:"#app",
      data(){
        return{
          score:69,
          isShow:false,
          arr: [1,2,3,4],
          users:[{
            name:'lb',id:1
          },{
            name:'lx',id:2
          },{
            name:'lz',id:3
          },{
            name:'lw',id:4
          }],
          hobby:[{
            name:'洗脚',id:1
            },{
              name:'洗脚',id:2
            },{
              name:'洗脚',id:3
            },{
              name:'SPA',id:4
          }],
          evname:'click'
          };
      },
      methods:{
        test(){
          //单机事件,
          alert('点我试试!!! ');
        }
      }
    });
    </script>
  </body>
</html>

7718853f6fb441b6a912bc8cf0b25f6c.png

过滤器

Vue.js的过滤器是一个强大的功能,可以让我们轻松地处理模板中的数据,提高代码的可读性和可维护性。同时需要注意的是,过滤器只适合于简单的数据格式化和处理,如果需要进行复杂的数据操作,应该使用计算属性或方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="date.js" type="text/javascript" charset="UTF-8"></script>
    <title>过滤器</title>
  </head>
  <body>
    <div id="app">
      <p>局部过滤器基本应用</p>
      {{msg}}<br />
      {{msg |filterA}}
      <p>局部过滤器串行应用</p>
      {{msg}}<br />
      {{msg |filterA |filterB}}
      <p>局部过滤器传参</p>
      {{msg | filterC(3,10)}}<br />
      <p>全局过滤器</p>
      {{time}}<br />
      {{time | fmtDateFilter}}
    </div>
    <script type="text/javascript">
      Vue.filter('fmtDateFilter', function(value) {
        //value表示要过滤的内容
        return fmtDate(value);
      });
      new Vue({
        el: "#app",
        filters: {
          'filterA': function(v) {
            return v.substring(0, 6)
          },
          'filterB': function(v) {
            return v.substring(2, 5)
          },
          'filterC': function(v, begin, end) {
            return v.substring(begin, end);
          }
        },
        data() {
          return {
            msg: '想死了',
            time: new Date()
          }
        },
        methods: {
          test() {
            alert('点我试试!!!');
          }
        }
      });
    </script>
  </body>
</html>

95690e20efa84d61a32db735014293eb.png

排座

<!DOCTYPE html>
<html>
  <head>
    <title>排座</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>排座</h2>
      <input type="text" v-model="seatInput1">
      <input type="text" v-model="seatInput2">
      <input type="text" v-model="seatInput3">
      <hr>
      <h3>用户:</h3>
      <ul>
        <!-- 遍历过滤器传来的值 -->
        <li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li>
      </ul>
      <hr>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          seatInput1: '',
          seatInput2: '',
          seatInput3: '',
          users: [{
              id: 1,
              name: '刘鑫'
            },
            {
              id: 2,
              name: '刘文'
            },
            {
              id: 3,
              name: '刘兵'
            },
            {
              id: 4,
              name: '刘志'
            },
            {
              id: 5,
              name: '大B'
            }
          ]
        },
        /* 定义一个filteredUsers计算属性 */
        computed: {
        /* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数,
        该回调函数会对数组中的每个元素进行判断,并返回一个新的数组,其中包含满足条件的元素。 */
        filteredUsers() {
          return this.users.filter(
          /* 使用=>箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user,
          表示users数组中的每个元素。 */
        user => {
        /* 使用逻辑运算符&&来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。
        如果满足这个条件,说明user.name不等于任何一个输入框的值,那么这个元素就会被保留在过滤后
        的数组中。 */
          return user.name !== this.seatInput1 &&
            user.name !== this.seatInput2 &&
            user.name !== this.seatInput3
              });
          }
        }
      });
    </script>
  </body>
</html>

6e21a574e4a643678c93cf4ec17d9ed5.png

计算属性监听属性

计算属性

Vue.js的计算属性是一个非常有用的功能,它可以提高代码的可读性和可维护性,同时也可以实现复杂的数据计算和处理。如果需要进行非响应式的数据操作,建议使用methods方法。

监听属性

在上面的例子中,我们定义了一个数据属性message,并且使用watch选项来监听该数据属性的变化。当该数据属性发生变化时,会触发watch中对应的函数,实现对数据属性变化的响应。


需要注意的是,使用watch选项来监听数据属性的变化时,需要在Vue实例中显式地定义响应式的数据属性,并且需要将计算属性转为响应式的数据属性,以便在watch选项中进行监听。


总的来说,Vue.js的监听属性功能可以帮助我们实现对数据属性的变化响应,可以在实际开发过程中提高代码的可读性和可维护性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>计算属性监听属性</title>
    <style type="text/css">
      .f30{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>计算机属性</p>
      单价:<input v-model="price" />
      数量:<input v-model="num" />
      小计: {{count}}
      <p>监听属性</p>
      千米: <input v-model="km" /><br />
      米:<input v-model="m" />
    </div>
    <script>
      new Vue({
        el:'#app',
        data(){
          return{
            price:79,
            num:1,
            m:1000,
            km:1
          };
          },
          computed:{
            count:function(){
              return this.price * this.num;
          }
        },
        watch:{
          km:function(v){
          //v指的是被监听的属性,是km
            this.m =parseInt(v) * 1000;
          },
          m:function(v){
          //v指的是被监听的属性,是m
            this.km = parseInt(v)/1000;
          }
        }
      });
    </script>
  </body>
</html>

fa006efbe1284131814445fcde2e77f7.png

今天就分享到这了谢谢各位的支持,谢谢大家!

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
6天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
6天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
6天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
11天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
11天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript UED 前端开发
Vue1.0常用语法
var vm = new Vue({   el: "选择器", 挂载到页面的那个元素里,即确定vue的作用范围 外部可通过vm.$el访问,得到的是一个原生dom元素,可进行对应操作   a: '', //自定义属性 外部可通过vm.$options访问   data: {
3569 0
|
12天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
12天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
12天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
下一篇
无影云桌面