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 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
6天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
5天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
5天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
11 2
|
5天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
6天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
9天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
7天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9
|
6天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。