本节目标:

          1.数据路径的三种方式
          2.{{}}和v-html的区别

1.绑定图片的路径

方法一:直接写路径

<img src="http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg">

方法二:在data中写路径,在div中使用

<img v-bind:src="url">

然后在data中写路径

  data () {
return {
msg:'你好,我是啦啦啦!',
url:'http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg',
}
}

方法三:这个和方法二一样,变化的为红色标注部分

   <img :src="url">

2。使用{{}}和使用v-html的区别

使用{{}}的时候数据会原样输出,使用v-html的使用会将特殊字符进行解析成html,然后显示。

这种方式是将他们的数据直接输出,并没有达到我们想要的解析
{{h}}
<hr/>
下面的方法可以解决问题
<div v-html="h"></div>

3.绑定数据的第二种方法

 绑定数据的第二种方法是
<div v-text="msg"> </div>

4.绑定样式

<hr/>
绑定样式的使用
<div v-bind:class="{'red':flag}">
   我是渣渣!
</div>

也可以写成简单的形式,将v-bind:直接写成:

5.方法的调用

(1)无参数的调用

<button v-on:click="getmsg()">我是按钮!</button>

对于这个注意下面的写法

methods:{
getmsg(){
/*alert('方法执行!');*/
alert(this.msg);
}

方法调用写在methods中。

(2) 有参数方法的调用

<button @click="fun04('1111')">
fun04(val)
{
alert(val);
}

6.动态值的绑定,就是数据只要发生变化,使用此变量值的地方都会发生变化。

{{msg}}只要数据发生改变,这里的值也会发生改变
<button v-on:click="setmsg()">我是改变</button>

methods的写法

setmsg(){
/*alert('方法执行!');*/
this.msg="我是渣渣!"
}

7.ref获取值,并显示

<input type="text" ref="info"/>

获取值

this.$refs.info

显示值(这个使用到了上面的动态值绑定,只要值发生改变,启用的地方就会发生变化)

<div ref="box">我是;啦啦啦</div>
this.$refs.box.style.background='this.$refs.info.value';

设置背景色

this.$refs.box.style.background='red';

8.历史值的获取

我们有时候在页面上显示数据的时候,当我们刷新之后,数据就会消失,所以我们可以使用声明周期函数,将数据加入到声明周期中进行保存,在刷新之后,可以重新的显示数据

数据
data () {
return {
todo:'dsfh',
list:[],
ok:true
}
}
methods:{
doAdd(){
this.list.push(this.todo);
localStorage.setItem('list',JSON.stringify(this.list));
},deelete(val){
//在某个位置上删除数据
this.list.splice(val,);
localStorage.setItem('list',JSON.stringify(this.list)) ;
/*this.list.pop(val);*/
/*上面的两个方法是相同的 */
}
}

红色的是将值保存起来,当我们刷新出发声明周期方法,

mounted()
{ var list = JSON.parse(localStorage.getItem('list'));
alert(list);
if(list)
{
this.list = list;将数据设置回list中去
}
}

9.组件的使用

(1)创建一个组件

<template>
<!--所有的内容需要被div包含起来-->
<div id="home">
<h2>这是一个组件</h2>
{{msg}}
</div>
</template>
<!--在组件中也是可以放入业务逻辑的-->
<script>
export default{
data(){
return{
msg:'我是啦啦啦!'
}
}
}
</script>
<!--scoped表示局部作用域 -->
<style lang="scss" scoped>
</style>

(2)将组件引入

import Home from './component/Home.vue';

(3)将组件挂载

 components:{
/**
* 2.挂载组件
*/
'v-home':Home,
'v-news':News
}

(4)使用组件

<v-home></v-home>

10,生命周期函数

这个比较简单

vue使用(二)的更多相关文章

  1. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  2. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  4. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  5. 前端笔记之Vue(二)组件&案例&props&计算属性

    一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...

  6. Vue(二十七)当前GitHub上排名前十的热门Vue项目(转载)

    原文地址:https://my.oschina.net/liuyuantao/blog/1510726 1. ElemeFE/element tag:vue javascript components ...

  7. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  8. vue(基础二)_组件,过滤器,具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

  9. VUE 生成二维码(qrcodejs)

    1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...

  10. Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)

    (一)axios 封装 (1)axios拦截器 可以在axios中加入加载的代码... (2)封装请求 后期每个请求接口都可以写在这个里面... (二)vuex user.js import { lo ...

随机推荐

  1. ios中静态库的创建和使用、制作通用静态库(Cocoa Touch Static Library)

    创建静态库可能出于以下几个理由: 1.你想将工具类代码或者第三方插件快捷的分享给其他人而无需拷贝大量文件.2.你想让一些通用代码处于自己的掌控之下,以便于修复和升级.3.你想将库共享给其他人,但不想让 ...

  2. Linux下安装Go环境

    登录Linux Mac或Linux的用户可以用命令ssh root@xxx.xxx.xxx.xxx登录主机Window的用户可以使用SecureCRT登录主机虚拟机用户直接打开你的虚拟机 安装Go环境 ...

  3. 【Cocos游戏实战】功夫小子第五课之帮助场景和选关功能的实现

    功夫小子之帮助场景和选关功能的实现 转载请注明出处:http://blog.csdn.net/suool/article/details/46661231 本节课的视频教程地址是: hmsr=teac ...

  4. iOS定制改动navigation的backbutton

    iOS开发中.navigation的返回button是英文"back".想改动成中文"返回"或者自己定义的文字.这么简单的事情却折腾了小半个小时.原来是被lef ...

  5. nagios,zabbix对照

    nagios/zabbix对照: nagios核心功能是监控报警.是一个轻量化的监控系统. 假设须要图标显示,须要添加图标显示插件(如pnp4nagios): 假设须要存入数据库,须要对应的插件(ND ...

  6. Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用

    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用 一.总结 一句话总结:$map['name'] = array('exp','is null'); 1.is null判断 ...

  7. Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别

    首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...

  8. 43.可变参数实现printf

    #include <stdio.h> #include <stdio.h> #include <Windows.h> #include <stdarg.h&g ...

  9. ACTIVATE STANDBY

    ACTIVATE STANDBY 在有些场景下我们需要激活standby为primary,使用激活的standby完成一些的需求. 如: - 拿激活后的standby做应用测试. - primary宕 ...

  10. 亲测有效的解决在vue cli@3 create 命令执行后 node-sass无法安装上的问题

    在使用Vue cli@3 搭建工程手脚架的过程中.当我们选择了采用 sass 处理 css 编译.在使用vue create test 命令行执行到最后.会到以下这步:然后开始报错: Download ...