深入浅出学Vue(二) | Vue基本语法与使用

去海边钓猪

于 2021-06-30 11:46:19 发布

阅读量437

点赞数 1

分类专栏： Vue 文章标签： vue dom html js

本文链接：https://blog.csdn.net/super1223/article/details/118357976

版权

Vue语法与使用

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

使用Vue，为了简化理解，可以将Vue语法部分和模板引擎的语法作比较一同学习，可以增强理解

在使用vue之前，通过一个小实例看vue的实例的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	</head>
	<body>
		<div id="app">
			<h3>{
  { hello }}</h3>	//显示hello的数据
		</div>
		<script type="text/javascript">
			var app = new Vue({
     
				el: '#app',
				data: {
     
					hello: 'hello,Vue!'
				}
			})
		</script>
	</body>
</html>

新建一个Vue对象，赋值给变量app，将标签元素用Vue对象中的el属性绑定在一起，然后在div标签内就可以使用Vue对象中的内容了。

`v-text`

用于绑定标签的文本值。

除了使用{ { }}的方式来绑定文本，我们还可以使用v-text的方式来绑定文本属性，两者各有优势。但在组件中，使用v-text将会给我们字符串拼接造成巨大麻烦

<div id="app">
    <h3 v-text="hello">你好</h3>	//覆盖原来的内容，显示hello，Vue!
</div>
<script type="text/javascript">
    var app = new Vue({
     
        el: '#app',
        data: {
     
            hello: 'hello,Vue!'
        }
    })
</script>

通过这样的一个方式，实现了之前直接使用{ {}}来对数据进行渲染的方式。

补充：如果有只需要渲染一次的属性，可以使用v-once。

它将不会随着的变化而变化，但是需要注意它可能对其他数据绑定的影响。

`v-html`

html标签类型的数据的绑定。

如果有html属性的值，比如一段百度富文本编辑器的内容项，我们希望直接解析后在绑定后不被解析成文本而是html。

使用v-html将可以实现这一效果

<div id="app">
    <h3 v-text="hello"></h3>	//html标签也被展示
    <h3 v-html="hello"></h3>
</div>

<script type="text/javascript">
    var app = new Vue({
     
        el: '#app',
        data: {
     
            hello: '<a>你好鸭</>'
        }
    })
</script>

`v-bind`

用于绑定标签属性值。
缩写为:

标签的文本值也是标签属性值的一种，但是使用除了文本值得其他属性时，如class，type，id，disabled等等，可以使用v-bind来实现值的绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
		<style>
			.myHello{
     
				background-color: #008000;	//背景色为绿色
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3 v-bind:class="myClass">hello</h3>	//绑定属性值
		</div>
		<script type="text/javascript">
			var app = new Vue({
     
				el: '#app',
				data: {
     
					myClass: 'myHello'
				}
			})
		</script>
	</body>
</html>

当标签的属性值有多个时，class属性需要使用[]包裹。而style用{}包裹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
		<style>
			.myHello{
     
				background-color: #008000;	//背景色为绿色
			}
			.myHello2{
     
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3 v-bind:class="[myHello, myHello2]">hello</h3>
			<h3 v-bind:style="{fontSize: fonts,color: colors}">hello</h3>
			<h3 v-bind:style="style1">hello</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
     
				el: '#app',
				data: {
     
					myHello: 'myHello',
					myHello2: 'myHello2',
					fonts: '12px',
					colors: 'red',
					style1: {
     
						fontSize: '20px',
						color: 'yellow'
					}
				}
			})
		</script>
	</body>
</html>

`v-on`

为标签绑定事件
其缩写为@

和原生js中绑定事件一样，v-on提供也是为标签绑定事件。

Vue对象中有一个methods属性，里面可以定义函数，调用这个函数中就可以修改Vue对象中的data值。

<div id="app">
    <button v-on:click="add()">+</button>	//绑定事件

最低0.47元/天解锁文章

去海边钓猪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
深入浅出学Vue(二) | Vue基本语法与使用

目录Vue语法与使用模板语法`v-text``v-html``v-bind``v-on``v-if``v-for``v-model`事件处理事件修饰符按键修饰符表单处理`文本``多行文本``单选按钮``复选框``下拉框`修饰符`.lazy``.number``.trim`Vue语法与使用模板语法Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析
复制链接

扫一扫