Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
下载：https://cn.vuejs.org/v2/guide/installation.html
引入方式：<script src="vue.min.js"></script>。
挂载点、模板与实例的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<!--挂载点：vue只会去处理对应挂载点内部的内容-->
<div id="root">
<!--模板：挂载点内部的内容-->
</div>
</body>
<script>
// vue会自动结合指定的模板和数据在对应的挂载点内生成要展示的内容
new Vue({
el:'#root', // 指定挂载点
template:'<h1>{{msg}} Vue</h1>', // 模板也可以写在此处
data:{
msg:'hello'
}
})
</script>
</html>实例数据渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<!--1、插值表达式，类似django模板语言双大括号会将数据解释为普通文本，而非 HTML 代码-->
<p>{{msg}}</p>
<!--2、要显示的内容为msg这个变量-->
<p v-text="msg"></p>
<!--3、可以识别msg1变量对应的html字符串值-->
<p v-html="msg1"></p>
<p>{{msg1 +'my love！'}}</p>
<!--三元表达式-->
<p>{{temp?666:88}}</p>
<!--计算-->
<P>{{temp2*2}}</P>
</div>
</body>
<script>
var my_vue = new Vue({
el: '#app1',
data:{
msg: 'Hello PythonFullStack',
msg1: '<h1>Hello PythonFullStack</h1>',
temp:false,
temp2:10,
}
})
</script>
</html>修改渲染内容：直接对my_vue实例进行操作，例如my_vue.msg=''，页面对应的内容也会直接修改。
v-show & v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<!--根据判断创建或显示标签，-->
<p v-if="temp">{{msg}}</p>
<p v-else>666</p>
<!--根据判断v-show的bool值来显示或隐藏数据，style="display: none;"-->
<p v-show="false">{{msg}}</p>
</div>
</body>
<script>
var my_vue = new Vue({
el: '#app1',
data:{
msg: 'Hello Vue',
temp:true,
}
})
</script>
</html>v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app1">
<ul>
<!-- 对于列表，循环结果：值 + 索引 -->
<li v-for="(item,index) in arr">{{item}}---{{index}}</li>
</ul>
<hr>
<ul>
<!-- 对于字典，循环结果：值 + 键 -->
<li v-for="(value,key) in obj">
{{key}}----{{value}}
</li>
</ul>
<hr>
<ul>
<!-- 遍历每个字典，直接通过key取出对应的value -->
<li v-for="item in obj2">
name：{{item.name}}
age：{{item.age}}
sex：{{item.sex}}
</li>
</ul>
</div>
</body>
<script>
var my_vue = new Vue({
el: '#app1',
data:{
arr:['a','b','c'],
obj:{name:'shanshan',age:23,sex:'female'},
obj2:[{name:'shanshan',age:23,sex:'female'},{name:'bob',age:28,sex:'male'}]
}
})
</script>
</html>数据绑定
v-bind:title='msg'将元素节点的title属性和实例中的msg属性保持一致，可以动态改变。
<div id="d1">
<!--绑定等号后面的就不是字符串-->
<!--前面的title为标签的固有属性，后面的title指向的vue实例data数据项的内容-->
<!--<div v-bind:msg="title">hello world</div>-->
<!-- v-bind: 可以缩写成 : -->
<div :title="msg">hello world</div>
</div>
</body>
<script>
new Vue({
el:'#d1',
data:{
msg:'i love coding'
}
})
</script>双向数据绑定
v-model它能轻松实现表单输入和应用状态之间的双向绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
</head>
<div id="d1">
<!-- 单向绑定：将input框的value属性绑定到vue实例的数据中title的值，和vue的title属性的值保持一致，改变输入值不影响title值 -->
<!--<input :value="title"/>-->
<!-- 双向绑定 -->
<input v-model:value="title"/>
<div :title="title">{{title}}</div>
</div>
</body>
<script>
new Vue({
el:'#d1',
data:{
title:'i love coding'
}
})
</script>
</html>事件绑定
v-on可以简写成@，例如监听点击事件@click。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app1">
<!--无参数-->
<button @click="handle_click1">toggle1</button><hr>
<!--有参数-->
<button @click="handle_click2('hello')">toggle2</button>
</div>
</body>
<script>
var my_vue = new Vue({
el: '#app1',
data:{
url:'http://www.baidu.com'
},
methods:{
handle_click1: function () {
alert(this.url)
},
handle_click2: function (arg) {
alert(arg)
}
}
})
</script>
</html>计算属性 & 侦听器
computed：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性。
watch：选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="d1">
姓：<input v-model="first_name"/>
名：<input v-model="last_name"/>
<!-- 会从页面缓存结果中取值 -->
<div>{{full_name}}</div>
<div>{{count}}</div>
</div>
</body>
<script>
new Vue({
el:'#d1',
data:{
first_name: '',
last_name: '',
count:0
},
// 其内部属性由其他属性计算而来
computed: {
full_name: function () {
return this.first_name + ' ' + this.last_name
}
},
// 监听vue的数据属性的变化
watch:{
first_name: function () {
this.count ++
},
last_name: function () {
this.count ++
}
}
})
</script>
</html>axios之get & post请求
异步请求，作用类似ajax。
下载axios.js：https://unpkg.com/axios/dist/axios.min.js
将内容复制粘贴。
实现前后端分离，前端向后端发送请求，后端处理请求，只返回json数据，不负责页面跳转。
需要结合后台接口测试！
1、get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app1">
<button v-on:click="showlist">toggle</button>
<ul>
<li v-for="student in list">
姓名：{{student.name}}----
年龄：{{student.age}}
</li>
</ul>
</div>
</body>
<script>
var my_vue = new Vue({
el: '#app1',
data:{
list:[],
},
methods: {
showlist: function () {
// json文件路径
url = 'students.json';
// 注意，此处必须先修改this名称，否则在axios内部调用this就指代的是window对象了
var self = this;
axios.get(url)
.then(function (value) {
// 取出json文件中的数据并渲染到模板展示
self.list = value.data; // 返回的json数据保存在value.data中
})
.catch(function (reason) {
})
}
}
})
</script>
</html>2、post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app1">
用户名：<input type="text" v-bind:value="username"/>
密 码：<input type="text" v-bind:value="password"/>
<input type="button" value="提交" v-on:click="my_login">
</div>
</body>
<script>
var my_vue = new Vue({
el: '#app1',
data:{
username:'',
password:''
},
methods: {
my_login: function () {
url = ''; // 接口函数
var self = this;
// 三个参数
axios.post(url,
{name: self.username, password: self.password},
{"headers":{"Content-Type":"application/x-www-form-urlencodes"}}
)
.then(function (value) {
console.log(value)
if(value.status=1){
location.href='http://www.baidu.com'
}
})
.catch(function (reason) {
})
}
}
})
</script>
</html>