Vue模板语法、事件和表单使用

更新日期: 2019-08-18阅读: 3k标签: 模板

模板语法

文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式
  <body>
      <div id="main">
        // 变量
        {{ message }}
        <br/>
        // 表达式
        {{ number + 1}}
      </div>
  </body>

  <script>
    const vm = new vue({
      el: '#main',
      data: {
        message: 'Welcome to Chivalrous Island!',
        number: 7
      },
    })
  </script>
JS表达式(计算、拼接、只能是单个表达式)
插入html代码(慎用!防止XSS攻击 ),我们可以直接在data里面定义html代码,但是它存在一个安全隐患,比如我们将下面的 dangerHTMl: "<span>0085</span>" 这句代码改变一下 dangerHTML: "<span onclick='alert(0085)'>0085</span>" ,这时候的当我们点击时它执行了它里面的一个代码会弹出一个框,这是很危险的。像很多个XSS攻击就是用的这种方法,所以对于v-html我们还是要慎用。
<div v-html="dangerHTMl"></div>

data: {
      ...
      dangerHTMl: "<span>0085</span>"
}
绑定,把data里面的数据绑定到元素的属性上,最常见的就是id
<div v-bind:id="id" v-html="dangerHTML"></div>

data: {
    ...
    id: 'oldId'
}

当data里面的数据改变时,它的Id也会随之改变。

<div v-bind:id="id">
	<button v-on:click="changeId">changeId</button>
</div>

methods: {
      changeId: function() {
        this.id = 'newId';
      }
}


除了Id的绑定之外,还有其他的一些绑定:

v-bind:disabled => :disabled,一个元素的属性 常用于表单,比如一些输入框,按钮,如下:这个时候的按钮就是一个不可点击的状态了。
<button v-bind:disabled="idDisabled" v-on:click="changeId">changeId</button>
v-bind:href 简写 :href,链接
v-on:click 简写 @ + click,点击

计算属性(缓存机制)

data: {
      json: {
        key1: 1,
        key2: 2
      }
},
methods: {
      ...
      computed: {
        getJsonkey1: function() {
          return this.json.key1;
        }
},
// 计算属性的缓存需要借助watch函数的监听
watch: {
        json: {
          handler: function(newVal,preVal){
            console.log(JSON.stringify(preVal));
            console.log(JSON.stringify(newVal));
          },
          deep: true,
        }
      }
}

在vue里面监听json需要深度监听,因为它们是在同一个内存空间里面,地址是一样的。

这个时候打印出来的,我们会发现它们的新值和旧值都是一样的,这是由于它们是同一个内存地址我们访问时值已经改变。如果我们要改变两次的值不一样,那么我们需要用到计算属性里面的缓存。

比如先不监听json,而是监听getJsonkey1的方法,将watch的json变成getJsonkey1,这样的话我们就可以得到前后的两个值。


条件渲染

v-if,判断元素是否要渲染,会复用元素(不想复用需要添加key)
v-else-if
v-else
if else if else
  testVIf: 'A',

  <button v-if="testVIf === 'A'">A</button>
  <button v-else-if="testVIf === 'B'">B</button>
  <!-- 当判断条件都不满足时显示
  <button v-else>C</button>
v-show,它和v-if 的区别在于,当v-if条件不满足时,那么整个元素都不会被渲染,但是当v-show不满足时,它只是不显示元素,相当于css display的none。它们两的用法是完全一样的。


事件处理

主要分为点击事件和键盘事件。

v-on:click,简写属性 @ + click
v-on:click.stop,阻止单击事件继续传播
<button v-on:click.stop="doAgain"></button>
v-on:submit.prevent,提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
v-on:click.stop.prevent,修饰符可以串联
<button v-on:click.stop.prevent="contact"></button>
v-on:submit.prevent,只有修饰符
<form v-on:submit.prevent></form>

按键修饰符(键盘事件):

v-on:keyup
keyup(e) {
   alert(JSON.stringify(e));
}

	<input v-on:keyup.enter="keyup" type="text">
keyup监听的是一个所有的键盘事件,如果我们只想监听某一个事件,那么我们可以在 v-on:keyup 后面添加下面属性,然后点击触发即可。 除此之外,对于下面的某一事件监听我们可以输入它对应的键盘码,比如enter对应的是13,v-on:keyup.13="keyup" 同样的我们也是点击enter触发事件。
v-on:keyup.enter,监听回车键
v-on:keyup.tab
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.space
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right


双向数据绑定(表单处理)

例如一个输入框,当我们输入一个值时,我们绑定的数据会变,而当我们手动的去改动这个值的时候,输入框里面的值也会随之改变。

v-model,不仅可以绑定value,还可以绑定表单里面的一些其他属性checked和selected,表单元素除了输入框之外比如复选框、单选框、下拉框都是可以的。

输入框数据的双向绑定:

<input v-model="inputValue" type="text">

<!-- 点击事件 -->
<button @click="changeInputValue">changeInputValue</button>
data: {
	...
	inputValue: 10805,
}
methods: {
	...
    // 当我们点击按钮时,触发changeInputValue,实现累加
    changeInputValue: function() {
        this.inputValue++;
    }
}
watch: {
	...
	inputValue: function() {
        console.log(this.inputValue);
	}
}


复选框:

<input v-model="checkboxValue" type="checkbox">

data: {
    // 默认选中
    checkboxValue: true
}

链接: https://fly63.com/article/detial/5354

前端模板引擎jsrender的实用入门教程

下一代Jquery模板JsRender。jsrender官网号称简单直观、强大轻快可扩展。压缩体积也只有8.9kb,可以单独在浏览器或node中使用,也可以配合jQuery使用。

EJS实例教程详解_ejs模板引擎的使用

ejs是一个款简单的纯js模板引擎,其主要作用是:用来从JSON数据中生成HTML字符串。

artTemplate模板引擎的使用

artTemplate是腾讯开源的前端模板框架,和mustache,handlerbars类似,在web项目中可以很方便的使用,上手快,如果用过mustache,那么几乎可以快速切换到template框架上来。

Vue模板语法中数据绑定

们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ;通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定

发送邮件使用html模板的实现的大致思路

客户最近有一个需求,大致的意思是提供一个 word文档,让其作为一个模板,在发送邮件的时候能够实现按照这个模板的样式和内容,替换其中 的一些字段,作为邮件的内容发给收件人

Bootstrap后台管理模板有哪些?

在开发项目中,后台管理因为面向群体相对比较固定,使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间。下面给大家分享一下最值得拥有的免费Bootstrap后台管理模板

如何选择 Web 前端模板引擎?

模板引擎负责组装数据,以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。无论你是否直接使用模板引擎,Web 模板一直都在,不在前端就在后端,它的出现甚至可以追溯到超文本标记语言 HTML 标准正式确立之前。

我来聊聊面向模板的前端开发

在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己、发展爱好、陪伴家人,工作、生活两不误

面向模板的前端开发

在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己

Vue模板语法

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

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!