课程地址:

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. jQuery遍历节点

    html代码 <div> <p>武汉长乐教育</p> <span>在哪才能真正学习会PHP技术?</span> <a href=&qu ...

  2. 收藏 创建第一个mvc

    http://blog.csdn.net/sdtsfhh/article/details/8201956

  3. 安全漏洞 ： XSS CSRF

    https://my.oschina.net/hc24/blog/527099 XSS成因概括 : XSS其实就是Html的注入问题,攻击者A的输入没有经过严格的控制进入了数据库,最终显示给来访的用户 ...

  4. Android 关于apk 打包后的地图定位和导航失败的问题

    项目中,使用了高德地图定位,调试的debug包定位完全没有问题,但是签名打包后,却始终无法定位,发现是测试环境下的SHA1码和签名发布版的SHA1码是不同的. 所以我们需要获取发布版的SHA1码: 方 ...

  5. linux下查找字符串

    如果你想在当前目录下 查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" * * : 表示当前目录所有文件,也可 ...

  6. PagerAdapter相关

    FragmentPagerAdapter 特点: 应用于少数的(10个以下)fragment:保存在内存中: 只需实现 getItemgetCount()两个方法 FragmentStatePager ...

  7. Azure进阶攻略丨如何驾驭罢工的Linux虚机网卡？

    很多人的生活中,流传着一个屡试不爽,据说可以解决任何问题的百宝锦囊: 所以经常可以听到类似这样的对话: -我的电脑咋上不去网了? -重启一下电脑. -还是不行呢! -重启一下路由器. -怎么还不行-_ ...

  8. union和struct的区别之处，在于内存的共享上

    首先看看union,在c++中,union可能没有多大用处,在c语言中,可能我们要借助其完成很多巧妙的设计,下面是其一个完整的定义: union UTest         {             ...

  9. win10下同时安装jdk1.7，1.8

    摘要:在开发不同项目时,可能会用到不同的jdk,需要我们在不同的jdk之间切换,怎么样在同一电脑上装不同的jdk,以此总结 1.正常安装jdk1.7,1.8     显示安装了jdk1.7,再安装jd ...

  10. mysql语句的相关操作整理

    事实证明,如果不经常跟代码,语句打交道,人家可是会翻脸不认人的,大脑也会觉得一脸懵逼,不知道做错了啥,这次长点记性了,把语句整理出来,不仅加强对sql语句的记忆,还能有个笔记,以后大脑懵逼了还能回来看 ...