课程地址:

https://ke.qq.com/course/251029#term_id=100295989

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue基础的方法</title>

	<link rel="stylesheet" href="">

	<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->

	<script src="../js/jquery-2.1.4.min.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

	<style type="text/css">

		.test{

			background-color:yellow;

		}

		.test2{

			font-size: 40px;

		}

		.green{

			color: green;

		}

	</style>

</head>

<body>

	<div id="vue">

		<h1 >{{message}}</h1>

		<hr>

		<!--调用messageReverse方法-->

		<span>{{messageReverse}}</span>

		<hr>

		 <!--v-on:click可以写成@click v-bind:title可以写成:title-->

		 <!--v-model="message"绑定上之后,message相当于传值引用的关系，message的改变会影响到所有引用它的地方-->

		 <!--lazy当值改变时,失去焦点时才触发-->

		<input type="text" v-model.lazy="message" :class="hd" @click="changBgColor" :title="message">

	</div>

</body>

<script type="text/javascript">

	var app=new Vue({

		el:'#vue',

		data:{

			message:'hello vue!!!',

    		hd:{test:false,test2:false,green:true},

		},

		//计算方法

		computed:{

		    messageReverse:function(){

		        return this.message.split('').reverse().join('');

			},

		},

		//方法

		methods:{

		    //方法一:

		    changBgColor(ev){

		        ev.target.style.background = 'red';

		        //调用下面的changBgColor2方法

                this.changBgColor2()

			},

			//方法二

            changBgColor2(){

				this.hd.test=true;

				this.hd.test2=true;

				this.hd.green=false;

			},

		},

        //初始化时,会自动执行 只是初始化时会执行一次

		mounted(){

            console.log('自动执行');

		},

		//数据改变时执行

		updated(){

            console.log('数据改变时执行');

		},

        //监听data里的word的变化,实时监听message的变化,

		//把input里加上lazy失去焦点时才改变message里的值,这样可以节省资源

        watch:{

            message(v_new,v_old){

                console.log(v_new);

                console.log(v_old);

			}

        },

	});

</script>

</html>

效果:

千锋教育Vue组件--vue基础的方法的更多相关文章

  1. HTML5从入门到精通（千锋教育）免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  2. Vue组件的基础用法（火柴）

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

  3. Vue组件使用基础

    这篇博文用来记录 .vue 组件的使用方法. 可以把组件代码按照 template.style.script 的拆分方式,放置到对应的 .vue 文件中. 模板(template).初始数据(data ...

  4. html中创建并调用vue组件的几种方法

    最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...

  5. vue组件挂载到全局方法

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...

  6. webpack的单vue组件(.vue)加载sass配置

    在通过vue-cli安装了webpack-simple 后,就自动安装好vue-loader了,但此时若写了含有sass的.vue组件,运行npm run dev时会报错.此时,需要我们在webpac ...

  7. Vue组件通信父传方法给子组件调用

    // 父组件中将 :meth='changeCom1' 传入入子组件 , 子组件运行 meth(i) 方法 并给他传参数 ,在父组件可以获取这个参数,并做相应的操作   // 父组件 <temp ...

  8. Vue 组件的基础介绍

    1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html ...

  9. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

随机推荐

  1. [LeetCode]11. Container With Most Water 盛最多水的容器

    Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...

  2. mysql数据库免安装版的配置过程

    1,从mysql官方网站下载免安装版本与自己电脑位数相同的mysql版本. 链接:https://www.mysql.com/ 2,将包解压到自定义的目录下 (例:D:\mysql-5.7.23-wi ...

  3. hdu 3530 区间和在一定范围内最长区间

    http://acm.hust.edu.cn/vjudge/problem/11253 这题要找到区间和在[m,k]范围内的最长区间 用两个单调序列保存区间最大值和最小值.当最大值-最小值>k时 ...

  4. Hibernate课程 初探一对多映射3-3 单向多对一的测试

    public static void testManyToOne(){ Student stu1 = new Student("小明","男"); Studen ...

  5. 应该知道的一些Markdown语法

    目录 快速输入标题 斜体和粗体,删除线 分隔线 外链接 无序列表 有序列表 定义型列表 插入图片 文字引用 标签分类 表格 行内代码块 代码段 注脚 待办事宜 Todo 列表 显示当前文章的目录 快速 ...

  6. 执行引入外部 jar 包的类的方法

    liunx 系统中,命令行中语法:(.后面是冒号:) java -cp .:third.jar MyClass windows 系统中命令行的语法:(.后面是分号;) java -cp .;third ...

  7. （四）JavaScript之[break和continue]与[typeof、null、undefined]

    7].break和continue /** * JavaScript 的break和continue语句 * break 跳出switch()语句 * break 用于跳出循环 * continue ...

  8. 【Troubleshooting 】Outlook 客户端无法显示电子邮件图像

    出于安全原因,Outlook 2013/2016不会在电子邮件中显示图像,但您可以右键单击图像并选择" 下载图片 "选项.我最近注意Outlook停止显示图像,并且没有下载图像的选 ...

  9. EasyUI手风琴 Tab卡使用

    --案例项目代码,初始化手风琴,定义打开Tab的方法. $(result).each(function () { //m_pi_jscode,pi_jscode if (m_pi_id != this ...

  10. 自定义 Firefox TLS支持版本s

    如果目前正在运行火狐26,你可能已经注意到,浏览器仅支持SSL 3.0和TLS 1.0,默认不开启TLS 1.1或TLS 1.2.另外我们知道Firefox 27 已经实现了对TLS 1.2的支持. ...