Vue.js学习笔记
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
vue.js学习笔记
Vue.js 是一款流行的 JavaScript 前端框架Vue 所关注的核心是 MVC 模式中的视图层它也方便地获取数据更新实现视图与模型的交互。
1.创建代码片段
声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。核心思想就是没有繁琐的DOM操作例如jQuery中我们需要先找到div节点获取到DOM对象然后进行一系列的节点操作。
为了方便学习vue首先创建代码片段文件 => 首选项 => 用户片段 => 新建全局代码片段文件命名格式为vue-html.code-snippets 。
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
" {{message}}",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" message: 'hello Vue !'",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
“prefix”: "vuehtml"设置后输入vuehtml即可生成代码片段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello Vue !'
}
})
</script>
</body>
</html>
2.单向数据绑定v-bind
vue指令语法v-指令名称。
v-bind 用在标签属性上面通过指令获取data定义变量值简写方式直接使用一个冒号 “ : ”。
<body>
<script src="vue.min.js"></script>
<div id="app">
<span v-bind:style="msg">parker7</span>
<span :style="msg">parker7</span> <!-- 简写 -->
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'color:green;'
}
})
</script>
</body>
3.双向数据绑定v-model
双向绑定当数据发生变化的时候视图也会跟着发生变化当视图发生变化的时候数据也会跟着同步变化。
<body>
<script src="vue.min.js"></script>
<div id="app">
{{keyword}}
<br>
<input type="text" v-bind:value="keyword"/>
<br>
<input type="text" v-model:value="keyword"/>
</div>
<script>
new Vue({
el: '#app',
data: {
keyword: 'parker7'
}
})
</script>
</body>
4.事件v-on
语法 v-on:事件名称=“调用方法”。
使用 v-on 进行数据处理v-on:click 表示处理鼠标点击事件。其他事件调用方式同理事件调用的方法定义在 vue 对象声明的 methods 节点中。
其中 v-on:click=“func()” 也可以使用写法二 @click=“func()” 。
<body>
<script src="vue.min.js"></script>
<div id="app">
<button v-on:click="show()">事件绑定写法1</button>
<button @click="show()">事件绑定写法2</button>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
show() {
console.log("show...")
}
}
})
</script>
</body>
5.条件渲染v-if、v-else
条件指令v-if:条件判断搭配v-else。和之前学过的jsp的c:if、c:else很类似。
<body>
<script src="vue.min.js"></script>
<div id="app">
<input type="checkbox" v-model="isOk">
<br>
<div v-if="isOk">checkbox被选中了</div>
<div v-else>checkbox没有被选中</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isOk : false
}
})
</script>
</body>
6.列表渲染v-for
实际就是循环指令。
<body>
<script src="vue.min.js"></script>
<div id="app">
<!-- 循环指令 -->
<div v-for="user in userList">
{{user.name}} ------- {{user.number}}
</div>
<!-- 获取索引indexindex从0开始 -->
<div v-for="(user,index) in userList">
{{index}} ---------- {{user.name}} ------- {{user.number}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
userList : [{"name":"parker","number":7},{"name":"zhangsan","number":10}]
}
})
</script>
</body>
打印结果
parker ------- 7
zhangsan ------- 10
0 ---------- parker ------- 7
1 ---------- zhangsan ------- 10
7.vue的生命周期
created() 方法在页面渲染之前执行。
mounted() 方法在页面渲染之后执行。
updated() 方法、destroyed() 方法同理。
方法定义在 vue 对象中插入 debugger 关键字可以在浏览器中进行断点调试chrome浏览器需要ctrl+b开启。
<body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
created () { //在页面渲染之前执行
debugger
console.log('created...')
},
mounted () { //在页面渲染之后执行
debugger
console.log('mounted...')
}
})
</script>
</body>
8.axios发送ajax请求
除了导入vue.js使用axios还需要导入axios.js。
axios发送请求的语法如下
axios.get("请求的接口路径") //可以为.json文件也可以为请求路径http://localhost:8080/...
.then()
.catch()
第一步模拟后端发来的json数据创建user.json文件。
{
"code":200,
"message":"成功",
"data":{
"users":[
{"name":"parker","number":7},
{"name":"zhangsan","number":10},
{"name":"lisi","number":9}
]
}
}
第二步编写js接受json数据。
<body>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<div id="app">
<!--表格-->
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.number}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
userList:[] //初始化一个空的userList数组
},
created () { //在页面渲染之前执行
//页面一开始就会调用此方法得到返回json数据
this.getList()
},
methods: {
getList() {
//使用axios方式发出ajax请求
axios.get("user.json") //.get和.post来发出请求
.then(response => { //.then请求成功时运行response对象中带有请求信息和数据
console.log(response)
this.userList = response.data.data.users //通过response中的层级结构来访问json数据
console.log(this.userList) //userList需要加this来表示使用的是vue的data结点中的数据
})
.catch(error => { //.catch请求出错时运行,error对象中包含错误信息
console.log(error)
})
}
}
})
</script>
</body>
页面成功打印
