Vue学习笔记(一)

1.初识Vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="navigator">
			<ul>
				<li v-for="item in navigator">
					{{item.text}}
				</li>
			</ul>
		</div>
		<script>
			new Vue(
			{
				el:"#navigator",
				data:{
					navigator:[
						{text:'福建'},
						{text:'上海'},
						{text:'广东'},
						{text:'北京'},
						{text:'四川'},
						{text:'西藏'}
					],
				}
			}
			
			);
			
		</script>
	</body>
</html>

2.插值

  • mustache是胡须的意思,因为{{}}像胡须,又叫大括号语法。在vue对象挂载的dom元素中,{{}}不仅可以直接写变量,还可以写简单表达式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Muastache</title>
</head>
<body>
<div id="app">
    <!--在Mustache中可以添加简单表达式    -->
    <h2>{{name}}数据</h2>
    <h2>{{firstname+' '+lastname}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        firstname:'kobe',
        lastname:'bryant',
        message:function (){
          console.log('xxx');
        }
      },
      methods:{}
    })
</script>
</body>
</html>

3.修饰符

3.1 v-once

v-once表示该dom元素只渲染一次,之后数据改变,不会再次渲染。

<div id="app">
    <h2>{{name}}</h2>
    <!-- v-once就是只展示最初的数据   -->
    <h2 v-once>{{name}}</h2>
</div>

上述{{name}}的name修改后,第一个h2标签数据会自动改变,第二个h2不会。

3.2 v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串,而输出被html自己转化的超链接。此时可以使用v-html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-html指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-html</h2>
    <h2>{{url}}</h2>
    <h2>使用v-html,直接插入html</h2>
    <h2 v-html="url"></h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        url:"<a href='http://www.baidu.com'>百度一下</a>"
      }
    })
  </script>
</body>
</html>
3.3 v-text

v-text会覆盖dom元素中的数据,相当于js的innerHTML方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{name}},小明</h2>
    <!-- v-text会覆盖原本的文本   -->
    <h2 v-text="name">,小明</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'你好啊',
        message:function (){
          console.log('xxx');
        }
      },
      methods:{}
    })
</script>
</body>
</html>

使用{{name}}是拼接变量和字符串,而是用v-text是直接覆盖字符串内容。

3.4 v-pre

有时候我们期望直接输出{{message}}这样的字符串,而不是被{{}}语法转化的message的变量值,此时我们可以使用v-pre标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{name}}</h2>
    <!--v-pre会阻止Vue解析表达式    -->
    <h2 v-pre>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        }
      },
      methods:{}
    })
</script>
</body>
</html>

如下图可见,使用v-pre修饰的dom会直接输出字符串{{name}}
在这里插入图片描述

3.5 v-cloak

有时候因为加载延时问题,例如卡掉了,数据没有及时刷新,就造成了页面显示从{{name}}到name变量“呈现”的变化,这样闪动的变化,会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前,div属性中有v-cloak这个标签,在vue解析完成之后,v-cloak标签被移除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    {{name}}
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        }
      },
      methods:{}
    })
</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值