Vue框架与基本使用：
简介：
Vue 是一套构建用户界面的渐进式框架。只关注视图层， Vue 的目标是通过尽可能简单的应用程序编程实现响应的数据绑定和组合的视图组件。
Vue.js 是一个提供了一个双向数据绑定的 Javascript 库可以保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷.
快速入门：
使用vue的一般步骤：
1.引入vue.min.js文件. 类似java的导包,性质是一样的
2.定义操作区域-其实就是html标签
3.定义视图 – 其实就是页面用户信息展示
4.定义vue对象
5.Vue 接管操作区域
6.定义数据数据模型
Vue 常用系统指令：
指令 |
作用 |
实例 |
|---|---|---|
v-on:click |
监听鼠标单击 |
v-on:click="自定义方法()" |
v-on:dblclick |
监听鼠标单击 |
v-on:dblclick="自定义方法()" |
v-on:change |
监听事件改变 |
v-on:change="方法名($event)":注意，括号里的$event是固定写法 |
v-bind |
可以绑定html标签的属性. |
<img v-bind:src="imgSrc" > ，可以改变展示图片的src路径 |
v-model |
输入项绑定.比如表单 |
<input type="text" v-model="数据项 . 属性"> |
v-for |
循环遍历. |
<div v-for="(item,index) in 数据项"> </div> |
VUE入门例子：
1.hello vue
<!--vueDemo.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
</head>
<body>
<!--
1.引入vue.min.js文件. 类似java的导包,性质是一样的
-->
<script src="js/vue.min.js"></script>
<!--
2.定义操作区域-其实就是html标签
-->
<div id="app">
<!--
3.定义视图 – 其实就是页面用户信息展示
-->
{{message}}
</div>
<script>
// 4.定义vue对象
new Vue({
el: "#app", // 5.Vue 接管操作区域
data : {
message : "hello Vue" //6.定义数据数据模型
}
})
</script>
</body>
</html>2.v-on:click demo
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>单击事件</title>
</head>
<body>
<!--
1.引入vue.min.js文件. 类似java的导包,性质是一样的
-->
<script src="js/vue.min.js"></script>
<!--
2.定义操作区域-其实就是html标签
-->
<div id="app">
<!--
3.定义视图 – 其实就是页面用户信息展示
-->
{{message}}
<!-- 单击事件 -->
<input type="button" value="press me" v-on:click="singleClick('comes a click!')"/>
</div>
<script>
// 4.定义vue对象
new Vue({
el: "#app", // 5.Vue 接管操作区域
data: {
message: "hello Vue" //6.定义数据数据模型
},
methods: { // 方法
singleClick : function (msg) {// msg 是参数. 名字随便起
// 浏览器弹框
alert(msg);
this.message = msg; // 赋值给数据模型/
}
}
})
</script>
</body>
</html>3.v-model demo
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模型</title>
</head>
<body>
<!--
1.引入vue.min.js文件. 类似java的导包,性质是一样的
-->
<script src="js/vue.min.js"></script>
<!--
2.定义操作区域-其实就是html标签
-->
<div id="app">
<!--
3.定义视图 – 其实就是页面用户信息展示
-->
name:<input type="text" v-model="user.username"/><br/>
password:<input type="password" v-model="user.password"/><br/>
<input type="button" value="获取" v-on:click="get()">
name is: {{user.username}} <br/>
password is:{{user.password}}<br/>
</div>
<script>
// 4.定义vue对象
new Vue({
el: "#app", // 5.Vue 接管操作区域
data: {
user: {username: "charles", password: "123456"} // json数据格式 初始值charles 123456
},
methods: { // 方法
get: function () {
alert(this.user.username + "~~~~" + this.user.password);
}
}
})
</script>
</body>
</html>通过几个demo的书写，可以更加熟悉vue入门的基本操作，就是以上总结的六步，其中比较重要和核心的是在定义vue对象的时候书写。总体外边是
new Vue(),在括号内部分别是el:"#视图区id" , 定义的数据模型，例如上个data:{ user: {username: "charles", password: "123456"} },的json数据 ，然后是methods:{},再在其内部写具体定义的方法即可，以上便是个人对vue框架学习以及入门的总结！
原创文章 42
获赞 72
访问量 8234