如何简单使用vue
这次就来说说如何使用VUE。
首先是吧,肯定得有项目文件,就先创建一个新的项目文件。然后把VUE的文件放到我的项目文件中,再进行引入VUE文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="../js/vue.js"></script>
</html>
引入之后呢,创建实例控制的区域,也就是DOM元素和实例化VUE的对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="NC"></div>
</body>
<script src="../js/vue.js"></script>
<script>
// 实例化Vue对象
new Vue({
// 控制区域
el: "#NC",
// 存放数据的地方
data: {},
// 存放方法的地方
methods: {},
})
</script>
</html>
这样就可以使用VUE基本的语法了。
首先,我们先实现把数据输出在页面上。在这里要注意的是,在原本的HTML语法中,我们是直接把字符串或者数值直接是写在DOM元素的标签里的,没有任何的包裹,直接就是写入,然后在页面显示。而在VUE中,有略微的不同,vue使用的是插值语法,它的数据是写在vue对象中的data属性中的,在DOM元素中是需要将属性用两个大括号包裹起来的({{属性}}),不然是无法输出里面的数据内容的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="NC">
<!-- 原生的HTML写法 -->
<p>我叫张三。</p>
<!-- VUE的插值写法 -->
<p>我叫{{name}}</p>
<!-- 两种写法的结果都是一样的 -->
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 实例化Vue对象
new Vue({
// 控制区域
el: "#NC",
// 存放数据的地方
data: {
name: "张三",
},
// 存放方法的地方
methods: {},
})
</script>
</html>
数据的写法:自定义的属性名: “值”,用法:{{属性名}}
多个数据就用逗号隔开,
要注意的是:
- 符号必须都是英文状态下的符号。
- 要在控制区域内使用。
- {{属性名}},括号里只能是属性名,可以存在空格,但是不可以存在属性名之外的字段。括号外可以有。
- {{属性名}},这种只能是在DOM元素的开始标签和结束标签的中间使用,不可以在行内使用。
想要在行内使用的话,就需要借助vue的指令:v-bind 简写 : 。冒号就是它的简写形式。
使用这个指令之后,数据是不需要再用大括号去包裹的。直接就是属性名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="NC">
<input type="text" v-bind:value="num"/>
<!-- 页面显示num的数据 18 -->
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 实例化Vue对象
new Vue({
// 控制区域
el: "#NC",
// 存放数据的地方
data: {
num: "18",
},
// 存放方法的地方
methods: {},
})
</script>
</html>
使用v-bind就可以在属性使用数据了。
接下来再说一个是如何使用方法。
首先就是写好一个方法,再去调用这个方法。
// 实例化Vue对象
new Vue({
// 控制区域
el: "",
// 存放数据的地方
data: {},
// 存放方法的地方
methods: {
fn(){}
},
})
在上面的代码中,我们就新写了一个方法。这里要注意的:如果在方法中使用data属性里面的数据的情况,需要使用 this.数据属性名。
// 实例化Vue对象
new Vue({
// 控制区域
el: "",
// 存放数据的地方
data: {
name: "张三",
},
// 存放方法的地方
methods: {
fn(){
this.name = "李四",
}
},
})
如何在方法中获取数据就是这样了。接下来就是如何去调用这个方法。
调用方法呢其实也很简单,使用v-on的指令就可以了。
格式:v-on:click=“函数名()”/@click=“函数名()”;这里的click只是演示使用,不表示只能使用click,也可以使用其他的事件.
注意点:
- 这是在Model的methods中查找是否存在这样的一个函数。
- 调用方法的时候的括号可以省略不写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="NC">
<input type="text" v-bind:value="name"/>
<button v-on:click="fn()">更改</button>
<button @click="fn">更改</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 实例化Vue对象
new Vue({
// 控制区域
el: "#NC",
// 存放数据的地方
data: {
name: "张三",
},
// 存放方法的地方
methods: {
fn(){
this.name = "李四",
}
},
})
</script>
</html>
两个按钮的演示效果是一样的,都是可以把数据修改成功。
文章仅供参考。