专栏首页eadelavuejs基础-常见指令

vuejs基础-常见指令

一、

v-cloak 解决插值表达式闪烁问题 ,只会替换自己字节占位符

v-text 默认没有闪烁问题,替换元素中原本内容

v-html  将内容里面的标签

        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p v-cloak>**不被替换**{{ msg }}</p>
            <h1 v-text="msg">***被替换*</h1>
            <div v-html="msg2">被替换</div>
        </div>
        
        <script type="text/javascript" src="vue.js" ></script>
        <script>
            
            var vm = new Vue({ 
                el : "#app",
                data : {
                    msg : "123",
                    msg2 : "<h1>这是一个标签</h1>"
                }
            })
        </script>

v-bind 要绑定的属性,写合法的表达式

			<input type="button" value="提交" title="mytitle" />
			<input type="button" value="提交" v-bind:title="mytitle+'123'" />
			<input type="button" value="提交" :title="mytitle" />  

v-on 事件绑定机制

<input type="button" value="按钮" v-on:click="show" />
<input type="button" value="按钮" v-on:mouseover="show" />
			var vm = new Vue({ 
				el : "#app",
				data : {
					msg : "123",
					msg2 : "<h1>这是一个标签</h1>",
					mytitle:"这是一个title"
				},
				methods:{
					show:function () {
						alert("hello");
					}
				}
			})
		</script>

在VM实例中,如果想要获取data上的数据,或者想要掉哦用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问,这里的this,就是表示我们new出来的实例

Vue实例,会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把最新的数据,从data上同步到页面中去;好处:程序员只需关心数据,不需要考虑如何重新渲染DOM页面。

v-bind 只能实习数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定

v-model

v-model指令,可以是实现表单元素和model中数据的双向数据绑定

注意 v-model 只能运用在表单元素中

input(radio, text , address, email ...)select checkbox textarea

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<div v-text="msg"></div>
			<input type="text" v-model="msg"/>
		</div>
	</body>
	
	<script>
		var vw = new Vue({
			el:"#app",
			data:{
				msg:"v-model效果展示!"
			}
		});
	</script>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery基础--jQuery特殊属性操作

    区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。

    eadela
  • redis--redis部署

    https://www.cnblogs.com/ttlx/p/11611086.html

    eadela
  • vue--过滤器(私有,全局)

    概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在...

    eadela
  • 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    如果想注册局部指令,组件中接受一个directives的选项,位于vue实例参数里面,局部指令只能在本组件使用

    常见_youmen
  • vue常用指令代码实例总结

    砸漏
  • 使用jquery-easyui写的CRUD插件(3)

    好,静态的页面已经可以完成了,下面就开始加上后台的处理部分。 查看easyui的API可以看到,如果需要后台支持的话,需要设置url属性,下面用java来做后台...

    cloudskyme
  • 混淆矩阵(Confusion Matrix)

    混淆矩阵是ROC曲线绘制的基础,同时它也是衡量分类型模型准确度中最基本,最直观,计算最简单的方法。

    于小勇
  • SpringCloud-容错处理Hystrix熔断器(五)

  • js实现截图并保存图片(html转canvas、canvas转image)

    从入门到进错门
  • jQuery选择器大全

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法...

    Isaac Zhang

扫码关注云+社区

领取腾讯云代金券