vue学习第一天【模板语法】

最新推荐文章于 2024-12-13 22:19:21 发布

qdd007

最新推荐文章于 2024-12-13 22:19:21 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/superAdmin_root/article/details/93082147

vue 专栏收录该内容

5 篇文章

订阅专栏

插入文本【{{key }}】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板语法</title>
	<script src="./vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{message}}</p>
	</div>
	
	<script>
      new Vue({
      	el: "#app",
      	data:{
      		message: "hello Vue!"
      	}
      })
	</script>
</body>
</html>

插入html【 v-html="key "】

模板语法

<script>
  new Vue({
  	el: "#app",
  	data:{
  		message: "<h1>菜鸡宝典<h1>"
  	}
  })
</script>

插入属性【v-bind】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板语法</title>
	<script src="./vue.min.js"></script>
</head>
<style>
.class1 {
	background: #444;
	color: red;
}
</style>
<body>
	<div id="app">
		<label for="r1">修改颜色</label>
		<input type="checkbox" v-model="use" id="r1">
		<br><br>
		<div v-bind:class="{'class1':use}">
          变色
		</div>
	</div>
	
	<script>
      new Vue({
      	el: "#app",
      	data:{
      		use:false
      	}
      })
	</script>
</body>
</html>

这里用到v-model在表单中勾选框的值和模型属性值进行双向绑定，
如果勾选的状态绑定的值就是true，模型中的use=true,此时v-bind又动态的绑定了样式是否使用。
v-bind:class ="{class1: true}"
v-bind通常用于表单组件双向绑定value,v-bind通常用于动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板语法</title>
	<script src="./vue.min.js"></script>
</head>

<body>
	<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{message.split('').reverse().join('')}}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>
</body>
</html>

{{}}支持运算
{{}}支持三元运算符
{{}}支持api方法
id=“list-1” 绑定标签的id

v-bind：href =“url” 绑定参数
v-if=“key”判断是否展示这个标签

v-on:reverseMessage 监听事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板语法</title>
	<script src="./vue.min.js"></script>
</head>

<body>
	<div id="app">
		<p>{{url}}</p>
		<button v-on:click="reverseMessage">反转字符串</button>
    <div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://www.baidu.com/'
  },
  methods: {
  reverseMessage: function(){
  this.url	= this.url.split('').reverse().join('')	
  }
  }
})
</script>
</body>
</html>

过滤器
vue.js允许你自定义过滤器，被用作一些常见的文本格式化。由“管道符”提示。格式如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板语法</title>
	<script src="./vue.min.js"></script>
</head>

<body>
	<div id="app">
		{{message | capitalize}}
    <div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'abc'
  },
  filters: {
  	capitalize: function(value){
  	if(!value){
  		return '';
  	}
  	value = value.toString()
  	return value.charAt(0).toUpperCase()+value.slice(1)
  }
  }
  
  
})
</script>
</body>
</html>

slice()方法中的参数不是走索引。从1开始。1代表第一个元素，大于1开始截取
当问两个参数的时候，左开右闭的截取字符串

v-bind缩写
v-bind:href = :href
v-on:click = @click