vue基础代码

<script src="vue路径"></script>

<script>

const vm = new Vue({

//el是固定写法,表示控制那块区域,接收的值是选择器        

el:'#app',        //el指向的选择器就是view视图区域

data:{     //Model数据源

}

})

</script>

vue中的指令可以分为6

内容渲染指令   属性绑定指令   事件绑定指令    双向绑定指令     条件渲染指令    列表渲染指令

内容渲染指令

1.v-text

缺点:会覆盖元素内容原有的内容!

2.{{}} (插值表达式Mustache)专门解决内容覆盖问题

实际开发中使用的最多,只是内容的占位符,不会覆盖原有的内容!

3.v-html

渲染包含HTML标签的字符串

属性绑定指令

注意:插值表达式只能用于元素的内容节点中,不能用在元素的属性节点中!

v-bind:元素的属性动态绑定属性值(vue规定v-bind:指令可以简写为:)

在使用v-bind属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:

<div :title="'box'+index">这是一个div</div>

事件绑定指令:

v-on:简写为@

事件处理函数要定义到methods中

绑定事件处理函数的时候,可以使用()进行传参

vue提供了内置变量,名字叫做$event,它就是原生DOM的 事件对象e

案件修饰符

在监听键盘事件时,我们需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符

@keyup.按键=‘方法名’

双向绑定指令

v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下,快速获取表单的数据。

1.input输入框

type="radio"

type="checkbox"

type="xxxx"

2.textarea

3.select

twenty four的更多相关文章

  1. 我叫Twenty,我是要成为博客王的博客框架

    标题套用了路飞的格式,其实我想说的是大多数都不相信你的梦想,直到你快走到了. 不废话了,介绍一下twenty: 这是基于CMS框架 zerojs打造一个博客.zerojs 的架构介绍在这里http:/ ...

  2. UVA 1252 十五 Twenty Questions

    十五 Twenty Questions Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submi ...

  3. mahout 运行Twenty Newsgroups Classification实例

    按照mahout官网https://cwiki.apache.org/confluence/display/MAHOUT/Twenty+Newsgroups的说法,我只用运行一条命令就可以完成这个算法 ...

  4. codeforces 630A Again Twenty Five!

    A. Again Twenty Five! time limit per test 0.5 seconds memory limit per test 64 megabytes input stand ...

  5. nodejs学习:师哥自家的twenty博客框架

    这周继续为DTree项目预热,学习sails框架的搭建和结构熟悉.正好师哥在做一个nodejs的CMS框架twenty,他们用的就是sails框架. 结构 首先简单了解一下结构.在jade文件里由an ...

  6. Twenty Newsgroups Classification任务之二seq2sparse(5)

    接上篇blog,继续分析.接下来要调用代码如下: // Should document frequency features be processed if (shouldPrune || proce ...

  7. Bob Waters - Twenty Years

    We were just children and grown up closeHow we made it this far only god knowsWe bend the rulesSmash ...

  8. 状压DP+记忆化搜索 UVA 1252 Twenty Questions

    题目传送门 /* 题意:给出一系列的01字符串,问最少要问几个问题(列)能把它们区分出来 状态DP+记忆化搜索:dp[s1][s2]表示问题集合为s1.答案对错集合为s2时,还要问几次才能区分出来 若 ...

  9. Codeforces--630A--Again Twenty Five! (水题)

     Again Twenty Five! Time Limit: 500MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u ...

  10. 关于wordpress4.8中的Twenty Seventeen主题的主题选项增加章节的实现

    我这里的wordpress版本是4.8  默认的主题是 Twenty Seventeen 我想实现的事 主题选项的首页  多增加2个章节 默认是只有4个章节  我想在增加2个 到6个 看下实现后的效果 ...

随机推荐

  1. CRT 与 exCRT

    感觉网上很多写的都不是很清楚啊 awa. CRT 就是解这个方程 \(\begin{cases}x\equiv r_1 \pmod {m_1}\\ x\equiv r_2 \pmod {m_2} \\ ...

  2. [专题总结]Gridea快速免费搭建个人博客

    介绍 或许你很想把你所知道的问题写出来,或许你文思泉涌,想给大家分享.我相信,你一定能写好博客,只要坚持,就可以了. 或许大家会不理解,为什么不用大平台的博客呢?或许你稍微了解就会知道,现在的博客平台 ...

  3. ATC:一个能将主流开源框架模型转换为昇腾模型的神奇工具

    摘要:本文介绍了昇腾CANN提供的模型转换工具ATC,介绍了其功能.架构,并以具体样例介绍了该工具的基本使用方法以及常用设置. 本文分享自华为云社区<使用ATC工具将主流开源框架模型转换为昇腾模 ...

  4. mybatis中的土鸡杂鱼

    mybatis中的土鸡杂鱼 目录 mybatis中的土鸡杂鱼 1.mapper接口为什么要和mapper.xml在同一个路径下? 2.主键生成为什么配置一个字段就可以? 原理 3.为什么默认使用的是预 ...

  5. mysql常用命令汇总

    1.查询表占用空间语句:SELECT CONCAT(table_schema,'.',table_name) AS 'Table Name', table_rows AS 'Number of Row ...

  6. ThreadLocal及常用场景

    ThreadLocal ThreadLocal是Java中的为解决多线程间数据隔离的解决方案,其底层依赖于Java的内存模型,依赖于当前执行线程的内存来完成对数据的存取操作. 一般在使用时,在对象中创 ...

  7. 微信JS-SDK自定义分享接入的注意点

    微信文档 ,https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html, 在用微信自定义分享,遇到了几个坑,记录一 ...

  8. list变成String类型

    list变成String类型 CollectionUtils.isEmpty(vo.getImgs())?"" : String.join(";", (Stri ...

  9. Oracle 的merge into 语法转postgre

    Oracle的merge into 语法 MERGE INTO t1 USING (SELECT id,name FROM t2) t2 ON ( t1.id=t2.id)   //主键 WHEN M ...

  10. chrome调试秘籍,让你的开发速度飞起来

    前言 熟练使用调试工具,势必能大幅提高我们的开发效率,达到事半功倍的效果.废话不多说,直接进入主题. Filter过滤 过滤器最简单的用法当然是直接输入过滤的字符,但这远远不够.除了直接输入,我们还希 ...