一、声明式渲染有两种:
1.插值用两个花括号如:{{内容}}
例子:html
<div id="app1">
<p>{{message}}</p>
</div>
js:
var nv = new Vue({
el:'#app1',
data:{
message:'哈喽!',
}
})
2.绑定数据如:v-bind:标签属性=“插入的内容”
html:
<div id="app2">
<span :title="message2">
鼠标悬停在这里
</span>
</div>
js:
var app2 =  new Vue({
el:'#app2',
data:{
message2:'页面加载于'+ new Date().toLocaleString()
}
})
二、条件与循环
1.v-if="一个变量",在data中用tru和false来判断是否显示
html:
<div id="app3">
<span v-if="seen">看见我</span>
</div>
js:
var app3 = new Vue({
el:"#app3",
data:{
seen:true //用true和false来判断能否看见内容
}
})
 
2.v-for:指令可以绑定数组的数据来渲染一个项目列表如:
html:
<div id="app4">
<ul>
<li v-for="item in itemList">{{item}}</li>
</ul>
</div>
 
js:
var app4 = new Vue({
el:"#app4",
data:{
itemList:['第一项','第二项','第三项']
}
})
三、处理用户输入
1.v-on 指令绑定一个事件监听器 
html:
<div id="app5">
<span >{{message5}}</span>
<button v-on:click="news">点击扭转</button>
</div>
js:
var app5 = new Vue({
el:'#app5',
data:{
message5:'hello vue!'
},
methods:{
news:function(){
this.message5 = this.message5.split('').reverse().join('')
}
}
})
2.数据双向绑定
html
<div id="app6">
<span>{{message6}}</span>
<input type="text" v-model="message6">
</div>
js:
var app = new Vue({
el:"#app6",
data:{
message6:'数据双向绑定'
}
})

vue中的指令的更多相关文章

  1. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  2. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  4. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  5. vue中的指令v-model

    Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀:都有着对应的官网介绍:https://cn.vuejs.org/v2/guide/forms.html v-model:数 ...

  6. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. Vue中的指令(听博主说总结的很好)

    指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签 ...

  8. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  9. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  10. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

随机推荐

  1. 使用DirectDraw直接显示YUV视频数据

    最近在编写一个进行视频播放的ActiveX控件,工作已经接近尾声,现将其中显示YUV数据的使用DirectDraw的一些经验总结如下:(解码部分不是我编写的,我负责从网络接收数据,将数据传给解码器,并 ...

  2. Hidden Markov Models(HMM) 初理解

    1. 一个简单例子

  3. Error Code: 1305. FUNCTION student.rand_string does not exist

    1.错误描述 13:52:42 call new_procedure Error Code: 1305. FUNCTION student.rand_string does not exist 0.0 ...

  4. CSS精心整理的面试题

    CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...

  5. asp.net URL重新实例

    void Application_Start(object sender, EventArgs e) { // 在应用程序启动时运行的代码 RegisterRoutes(); } // 页面存放目录 ...

  6. 双刃剑MongoDB的学习和避坑

    双刃剑MongoDB的学习和避坑 MongoDB 是一把双刃剑,它对数据结构的要求并不高.数据通过key-value的形式存储,而value的值可以是字符串,也可以是文档.所以我们在使用的过程中非常方 ...

  7. 使用AOP的好处

    原始代码的写法 既然要通过代码来演示,那必须要有例子,这里我的例子为: 有一个接口Dao有insert.delete.update三个方法,在insert与update被调用的前后,打印调用前的毫秒数 ...

  8. ASP.Net Core的Code Fist代码先行操作方法

    Asp.Net  core的Code Fist(代码先行)主要有以下几步: 1.创建实体类 2.创建数据库上下文 3.填加连接字符串 4.依赖注入 5.添加基架工具并执行初始迁移 6搭建模型的基本架构 ...

  9. VS Visual Studio 入门技巧

    0.在VS常用快捷键 F1:    调出当前光标所在处关键字的帮助文档 F5:    编译及运行 Ctrl+F5:    编译及运行(不调试) F6:    生成解决方案,用来检查语法错误 F7:   ...

  10. [MyBatis]DAO层只写接口,不用写实现类

    团队开发一个项目,由老大架了一个框架,遇到了DAO层不用写接口了,我也是用了2次才记住这个事的,因为自己一直都是习惯于写DAO层的实现类,所以,习惯性的还是写了个实现类.于是遇到错误了. 找不到那个方 ...