Vue模板语法

一.插值

1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>vue插值</title>
  6.          <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  7.              </head>
  8.              <body>
  9.                  <div id="app">
  10.                      <ul>
  11.  
  12.                          <li>
  13.                              <h3>文本</h3>
  14.                                 {{msg}}
  15.                          </li>
  16.                          <li>
  17.                              <h3>Html字符串渲染</h3>
  18.                               <div v-html="htmlSter"></div>
  19.                          </li>
  20.                          <li>
  21.                              <h3>v-bind属性绑定</h3>
  22.                               <input type="text" value="" />
  23.                               <input type="text" v-bind:value="age" />
  24.                          </li>
  25.                          <li>
  26.                              <h3>表达式</h3>
  27.                                 {{str.substr(,).toUpperCase()}}
  28.                                         {{ number +  }}
  29.                                         {{ ok ? 'YES' : 'NO' }}
  30.                                         <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
  31.                          </li>
  32.                      </ul>
  33.                  </div>
  34.              </body>
  35.              <script type="text/javascript">
  36.                  new Vue({
  37.                      el:'#app',
  38.                      data:{
  39.                          msg:'Hollo Vue!!!',
  40.                          htmlSter:'<span style="color: red;">Html字符串渲染</span>',
  41.                          age:,
  42.                          str:'https://www.baidu.com',
  43.                          number:,
  44.                          ok:true,
  45.                          id:
  46.                      }
  47.                  })
  48.              </script>
  49.          </html>
  50.

二.指令

 指的是带有“v-”前缀的特殊属性

1.2.1 核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model/v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if

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

v-for：类似JS的遍历，
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

v-bind
v-on
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>vue指令</title>
  6.          <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  7.              </head>
  8.              <body>
  9.                  <div id="app">
  10.                      <ul>
  11.                          <li>
  12.                              <h3>分支</h3>
  13.                              <div v-if="score > 90">A</div>
  14.                              <div v-else-if="score > 70">B</div>
  15.                              <div v-else-if="score > 60">C</div>
  16.                              <div v-else-if="score < 50">D</div>
  17.                              <div v-else=" "></div>
  18.                                 <input type="text" v-model="score" />
  19.                          </li>
  20.                          <!-- 分清楚v-fi跟v-show的区别 -->
  21.                          <!-- v-if：控制的是标签是否打印
  22.                               v-show：控制的是标签的样式
  23.                          -->
  24.                          <li>
  25.                              <h3>v-show指令</h3>
  26.                              <div v-show="flag">hollo</div>
  27.                              <div v-if="flag">hollo !!!</div>
  28.                          </li>
  29.                          <li>
  30.                              <h3>v-for指令</h3>
  31.                              <div v-for="item,index in data1">
  32.                                  {{item}}~{{index}}<br />
  33.                              </div>
  34.                              <hr />
  35.                              <div v-for="item,index in data2">
  36.                                  {{item.id}}~{{item.name}}~{{index}}<br />
  37.                              </div>
  38.                          </li>
  39.                          <li>
  40.                              <h3>动态参数</h3>
  41.                              <button v-on:[evname]="xxx">动态参数</button>
  42.                              <input type="text" v-model="evname" />
  43.                          </li>
  44.                      </ul>
  45.                  </div>
  46.              </body>
  47.              <script type="text/javascript">
  48.                  new Vue({
  49.                      el:'#app',
  50.                      data:{
  51.                          score:,
  52.                          flag:false,
  53.                          data1:[,,,,],
  54.                          data2:[{
  55.                              id:,
  56.                              name:'！！！'
  57.                              },
  58.                              {
  59.                                  id:,
  60.                                  name:'......'
  61.                                  },
  62.                                  {
  63.                                      id:,
  64.                                      name:'。。。'
  65.                                      }
  66.                              ],
  67.                              evname:'click'
  68.  
  69.                      },
  70.                      methods:{
  71.                          xxx(){
  72.                              console.log('方法被调用！！！')
  73.                          }
  74.                      }
  75.                  })
  76.              </script>
  77.          </html>
  78.

三. 过滤器

全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 -->
{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}

注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>vue过滤器</title>
  6.          <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  7.              </head>
  8.              <body>
  9.                  <div id="app">
  10.                      <ul>
  11.                          <li>
  12.                              <h3>局部过滤器注册</h3>
  13.                              {{msg}}<br />
  14.                              {{msg | a}}<br />
  15.                              {{javax1 | a}}<br />
  16.                          </li>
  17.                          <li>
  18.                              <h3>局部过滤器串联</h3>
  19.                              {{javax1 | a | b}}
  20.                          </li>
  21.                          <li>
  22.                              <h3>全局过滤器注册</h3>
  23.                              {{javax1 | c}}
  24.                          </li>
  25.  
  26.                      </ul>
  27.                  </div>
  28.              </body>
  29.              <script type="text/javascript">
  30.                      Vue.filter(
  31.                      'c',function(v){
  32.                          console.log(v);
  33.                              return v.substring(,);
  34.                      }
  35.                      ),
  36.                  new Vue({
  37.                      el:'#app',
  38.                      data:{
  39.                      msg:'https://www.baidu.com',
  40.                      javax1:'https://www.javax1.com'
  41.                      },
  42.                      filters:{
  43.                          'a':function(v){
  44.                          console.log(v);
  45.                              return v.substring(,);
  46.                          },
  47.                          'b':function(v){
  48.                          console.log(v);
  49.                              return v.substring(,);
  50.                          }
  51.                      }
  52.                  })
  53.              </script>
  54.          </html>
  55.

四.计算机属性与监听属性

4. 计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}

5. 监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>Vue计算监听</title>
  6.          <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  7.      </head>
  8.      <body>
  9.          <div id="app">
  10.              <ul>
  11.                  <li>
  12.                      <h3>计算属性</h3>
  13.                      单价：<input v-model="price" />
  14.                      数量：<input v-model="num" />
  15.                      总价: {{total}}
  16.                  </li>
  17.                  <li>
  18.                      <h3>监听属性</h3>
  19.                      km:<input v-model="km"/>
  20.                      m:<input v-model="m" />
  21.                  </li>
  22.              </ul>
  23.          </div>
  24.      </body>
  25.      <script type="text/javascript">
  26.          new Vue({
  27.              el:'#app',
  28.              data:{
  29.                  price:,
  30.                  num:,
  31.                  km:,
  32.                  m:
  33.              },
  34.              computed:{
  35.                  total(){
  36.                      return parseInt(this.price) * parseInt(this.num);
  37.                  }
  38.              },
  39.              watch:{
  40.                  km(v){
  41.                      this.m = v * ;
  42.                  },
  43.                  m(v){
  44.                      this.km = v/;
  45.                  }
  46.              }
  47.          })
  48.      </script>
  49.  </html>

Vue模板语法(一)的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  3. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  5. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  6. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  7. Vue模板语法（二）

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

  8. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  9. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. 路径规划基础A*算法

    1,Dijkstra’s  算法 一种发散性寻找最短路径算法. 由起点开始向四周开始发散,直到碰到目标点为止.这时就是最短路径.优点:能找到与目标点的最短路径:缺点:搜索花费的时间会比较长. 2,Gr ...

  2. html。PROGRESS进度条使用测试

    效果图 : 代码: ----------------------------------- //本文来自:https://www.cnblogs.com/java2sap/p/11199126.htm ...

  3. [转帖]龙芯3A4000处理器实测：28nm工艺不变 性能仍可提升100%以上

    龙芯3A4000处理器实测:28nm工艺不变 性能仍可提升100%以上 http://news.mydrivers.com/1/663/663122.htm 龙芯是中科院下属的计算机所研发的自主产权国 ...

  4. Skywalking总结

    步骤四,完善Agent:你会发现,你在skywalking的Web监控页面看到的项目名称并非你原有的项目名称,而是一个默认的—— Your_ApplicationName.这是因为你还没有配置.打开/ ...

  5. 【mybatis】标签条件中判断入参属性值是否包含子字符串

    可以直接使用 contains判断 <foreach collection="list" item="item" index="index&qu ...

  6. Docker 快速安装&搭建 Mysql 环境

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  7. 2019-11-29-VisualStudio-使用三个方法启动最新-C#-功能

    原文:2019-11-29-VisualStudio-使用三个方法启动最新-C#-功能 title author date CreateTime categories VisualStudio 使用三 ...

  8. jquery动画控制非css属性

    JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果, 比如 $("#box").animate({height:"300px" ...

  9. C# Newtonsoft.Json JsonSerializerSettings配置序列化操作

    https://blog.csdn.net/u011127019/article/details/72801033

  10. Maven项目配置Logback输出JSON格式日志

    最近,项目提出需求,日志需要固定输出为JSON格式,以便后端Flink程序解析. 项目背景 项目为简单的Maven项目,日志由Filebeat采集,因此不需要配置输出至Logstash. 下面为pom ...