Vue (1) HelloWorld 表达式和常见指令

最新推荐文章于 2022-10-30 17:21:40 发布

不像程序猿的程序员

最新推荐文章于 2022-10-30 17:21:40 发布

阅读量366

点赞数

分类专栏：前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_44538738/article/details/106527337

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue : 渐进式 JavaScript 框架

开始使用： 官网下载 vue.js 文件，在 html 文件中直接用 script 标签引入(建议下载生产版本体积小 vue.min.js )。

官方下载地址：https://cn.vuejs.org/v2/guide/installation.html

<!-- 直接引入vue.min.js , vue注册成全局变量 -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>

HelloWorld.html 入门例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue Hello World</title>
		<!-- 直接引入vue.min.js , vue注册成全局变量 -->
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 1.创建div元素 -->
		<div id="xiaoen">
			{{tip}}  <!-- 3.使用{{}} 来调用数据 --><br/>
		</div>	
	</body>
	
	<script type="text/jscript">
		/* 2.创建一个vue对象,挂载在指定的html元素上 */
		var u = new Vue({
			el:'#xiaoen',
			data:{
				tip: "vue helloworld !"
			}
		});
	</script>
	
</html>

效果很简单，就是在页面上出现 vue helloworld !

提示：我是在 HBuilder X 上建的vue项目，但如果直接单个 html 页面可能运行出错。

el: 跟 html元素绑定
data： html元素能调用的数据，可以说是绑定了的。
methods : 绑定的方法
v-model : 双向绑定，一边被改变，另外一边也会被改变

简单的一个案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue Hello World</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 1.创建div元素 -->
		<div id="xiaoen">
			{{user}}  <!-- 3.使用{{}}来使用数据 --><br/>
			{{user.name}}<br/>
			{{user.sex}}<br/>
			{{user.age}}<br/>
			<input type="text" name="name" v-model="name"/>
		</div>	
	</body>
	
	<script type="text/jscript">
		/* 2.创建一个vue对象,挂载在指定的html元素上 */
		var u = new Vue({
			el:'#xiaoen',
			data:{
				name: "xiaoen",
				user:{
					sex: '男',
					age: '20'
				}
			},
			methods : {
				changeName:function(){
					console.log(this.name);
				} 
			}
		});
		
	</script>
	
</html>

运行结果：可以看到输入框的里面改变，上面的标签的内容也在改变，这就是 v-model 双重绑定的功劳。
在这里插入图片描述

常规表达式：

在这里插入图片描述
注意：只要 div 里面的一个 {{}} 出错，便会导致整个div都显示不出来。

插值方式：

v-text=“表达式”             设置标签中的文本
v-html                     设置标签中的html
v-if                       判断条件
v-for                      循环
v-bind:                    绑定属性或对象
v-show:                    判断表达式的值,true则显示,false则隐藏
v-model                    数据双向绑定
v-on                       注册事件

v-text v-html v-if v-bind v-show
v-bind:type 可以缩写成 : type
在这里插入图片描述
v - for

v - on 绑定事件 v-on:click 缩写成 @click
在这里插入图片描述
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

文章皆为学习记录，如有错误之处，欢迎指出一起学习，谢谢噢！

不像程序猿的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue (1) HelloWorld 表达式和常见指令

Vue : 渐进式 JavaScript 框架开始使用：官网下载 vue.js 文件，在 html 文件中直接用 script 标签引入(建议下载生产版本体积小 vue.min.js )。官方下载地址：https://cn.vuejs.org/v2/guide/installation.html<script src="js/vue.min.js" type="text/javascript" chars
复制链接

扫一扫