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>
<!-- 获取索引index，index从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>
页面成功打印
