Vue.js自学篇一：模板语法整合笔记

最新推荐文章于 2022-09-21 20:47:56 发布

灵活大胖子

最新推荐文章于 2022-09-21 20:47:56 发布

阅读量331

点赞数

分类专栏： Vue 文章标签： Vue.js 模板语法

本文链接：https://blog.csdn.net/weixin_43972758/article/details/102535122

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js 模板语法

来自菜鸟教程整理修改

代码片段，注释 < !-- – >用 // 代替

<!DOCTYPE html>
<html>
<head>
//如果出现乱码，去掉这行
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.class1{
  background: #7be;
  color: #eee;
}
</style>
</head>
<body>
<div id="app">
  //数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值
  <p>{{ message }}</p>
  
  //如果要显示HTML代码效果，使用v-htnl
  <div v-html="message2"></div>
  
  //HTML属性中的值应该使用v-bind指令，判断class1的值，如果为true使用class1类的样式，否则不使用该样式
  //for="r1"为了使点击文本时能触发点击checkbox控件
  <label for="r1">修改颜色</label><input type="checkbox" v-model="isOKUse" id="r1"/>
  <br/><br/>
  <div v-bind:class="{'class1':isOKUse}">
  	v-bind:class 指令
  </div>
  
  //表达式，Vue.js提供了完全的JavaScript表达式支持
  {{5+5}}<br>  //结果为10
  {{ ok ? 'YES' : 'NO' }}<br>  //三幕函数  ok=true时  输出 YES
  {{ message3.split('').reverse().join('') }}  //倒序输出  message3=123  结果：321
  <div v-bind:id="'list-' + id">测试内容</div>  //为div的属性id 赋值名称list-1（字符串拼接）
  
  //指令是带有v-前缀的特殊属性，主要用于在表达式的值改变时，将某些行为应用到DOM上
  // v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
  <p v-if="seen">结果为true你就可以看到我了</p>
  <template v-if="okTem">//如果ok=false 就看不到下面的那段话了
  	<h1>内容1</h1>
    <p>学的不仅是技术，更是梦想！</p>
    <p>内容2</p>
  </template>
   
   //参数：参数在指令后以冒号指明。例如，v-bind指令被用来响应地更新HTML属性
   //等同于上上例的 v-bind:id=""
   <pre><a v-bind:href="url">百度一下你就知道</a></pre>
   //在这里href是参数，告诉v-bind 指令将元素的href属性与表达式url的值绑定。
   //v-on 指令，它用于监听DOM事件
   <a v-on:click="doSomething">//这里参数是监听的事件名。
   //或者对按钮的监听实例
   <p>{{message5}}</p>   //值为123
   <button v-on:click="reverseMessage">反转字符串</button>   //点击后message5的值为321
   

   //修饰符
   //修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
   <form v-on:submit.prevent="onSubmit"></form>
   
   //用户输入  在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
   //v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
   <p>{{ message4 }}</p>
   <input v-model="message4">
    
   //过滤器  Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下  
   <div v-bind:id="rawId | formatId"></div>  //在 v-bind 指令中
   //过滤器函数接受表达式的值作为第一个参数  实例对输入的字符串第一个字母转为大写
   {{ message6 | capitalize }}  //在两个大括号中
   //过滤器可以串联：
   {{ message | filterA | filterB }}
   //过滤器是 JavaScript 函数，因此可以接受参数：
   {{ message | filterA('arg1', arg2) }}
   //这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
    
   //缩写
   //Vue.js 为两个最为常用的指令提供了特别的缩写：
   //完整语法
   <a v-bind:href="url"></a>      <a v-on:click="doSomething"></a>
   //缩写
   <a :href="url"></a>            <a @click="doSomething"></a>    
</div>

<script>
new Vue({
  el: '#app', //获取对应 id
  //数据内容 key : value , 隔开
  data: { 
    message: 'Hello Vue.js!',
    message2: '<h1>整合笔记</h1>',
    isOKUse: false,
    ok: true,
    message3: '123',
	id: 1,
	seen:true,
	okTem: true,
	url: 'http://www.runoob.com',
	message4: 'Runoob!',
	message5:'123',
	message6:'runoob',
  },
  //监听的时间
  methods: {
  	//监听事件函数名
    reverseMessage: function () {
      this.message5 = this.message5.split('').reverse().join('')
    }
  },
  //过滤器
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>

重点简介

语法	说明
{{ message}}	数据绑定
v-html=“message”	带有HTML代码的数据绑定
v-model=“use”	数据值绑定
v-bind:class="{‘class1’: use}"	修改添加样式
{{5+5}} 显示10 {{ ok ? ‘YES’ : ‘NO’ }} 三幕函数	在花括号支持JavaScript 表达式
v-if=“seen”	if指定，判断是否显示
v-bind	属性绑定例：v-bind:href=“url” 或者v-bind id=“id”
v-on:click=“doSomething”	点击事件绑定
{{ message \| capitalize }}	过滤器

数据写在data里面，隔开

 data: {
    message1: 'aaa'，
    message1: 'aaa'，
    message1: 'aaa'，
    message1: 'aaa'，
    .
    .
    .
  },

v-on 点击事件

methods: {
   函数名: function () {
     内容
   }
 }

过滤器写在 {{ message | capitalize }}

//value 参数message 
filters: {
    capitalize: function (value) {
     内容
    }
  }

灵活大胖子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js自学篇一：模板语法整合笔记

Vue.js 模板语法来自菜鸟教程整理修改代码片段，注释 < !-- – >用 // 代替<!DOCTYPE html><html><head>//如果出现乱码，去掉这行<meta charset="utf-8"><title>Vue 测试实例</title><script src="htt...
复制链接

扫一扫