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. Vue 禁止按钮多次点击 重复提交数据(指令实现)

    全局定义,方便调用 新建plugins.js export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick ...

  2. 添加weui-miniprogram

    1.打开根目录 npm init npm install weui-miniprogram --save 2.打开project.config.json 设置 "packNpmManuall ...

  3. [C#]问号?和双问号??

    [C#]问号?和双问号?? 如何使用 问号?表示该变量可以为空 int?; 等价于:int? = null; 双问号??表示如果为双问号左边的变量为null,则取右边的值,否则取左边变量的值 c=a? ...

  4. PKU2506Tiling

    https://blog.csdn.net/Harington/article/details/86612106

  5. 【研究生学习】SNR、Eb/N0和Es/N0的关系

    SNR.Eb/N0与Es/N0的关系 在模拟通信中,SNR是一个非常有用的指标 实例说明

  6. Word18 制作家长会通知office真题

    1.课程的讲解之前,先来对题目进行分析,首先需要在考生文件夹下,将Wrod素材.docx文件另存为Word.docx,后续操作均基于此文件,否则不得分. 2.这一步非常的简单,打开下载素材文件,在[文 ...

  7. 如何删除Word文档中的空白页

    需求 平常我们写 Office 文档的时候,经常会不小心多加几页空白,那么如何删除 word 文档中的空白页呢? 小编结合网友提供的办法和亲身测试的操作经验,给大家提供几个可行的方案. 原文:如何删除 ...

  8. C++基础复习题(笔试题)

    C++基础~for循环:选择,判断 HELLO,亲爱的小朋友! 我们准备 35个选择题,对for循环及之前的内容进行一个简单的复习,快来看一下吧! 顺序&选择结构 1.对于C++中变量的命名规 ...

  9. Codeforces 1492D、Genius's Gambit

    原题网址 https://codeforces.com/contest/1492/problem/D 题目大意 给定a,b,k,求x,y使得x和y的二进制表示都恰有a个0和b个1,且不能使用开头的0. ...

  10. CodeGym自学笔记08——交互对象

    交互对象 用 Java 语言编写的每个程序都由类和对象组成. 1."Java 程序员就像设计工程师一样,只是他们不制作蓝图,而是编写类.船舶零件是根据蓝图制造的,而对象是基于类创建的.&qu ...