Vue.js使用文档及下载Vue.js
- Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看：https://cn.vuejs.org/v2/guide/
- vue.js如果当成一个库来使用，可以通过下面地址下载：https://cn.vuejs.org/v2/guide/installation.html
- 可视化学习网站:https://scrimba.com/playlist/pXKqta
Vue作为前端三大框架之一（Angular.js、React.js、Vue.js）属于热度突出的一个
- Vue.js是一个构建数据驱动的 web 界面的渐进式框架
- Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
- 核心是一个响应的数据绑定系统
1、Vue的使用
（1）导包：官方提供了两个环境包
- 开发环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生产环境版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
（2）声明式渲染：采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<a href="#">{{message}}</a>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'领取优惠劵',
}
})
</script>
</html>
2、数据绑定
（1）数据引用：{{数据key}}
（2）数据绑定：
{
key:value,
key2:value2,
}
案例：
<div id="app">
<a href="#">{{message}}</a>
<br>
<span>{{alist}}</span>
<br>
<a v-bind:href="url">戳我有惊喜</a>
<br>
<span :title='showmessage'>鼠标放在这里</span>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'领取优惠劵',
alist:['python','mysql','linux','html','js','css'],
url:'https://blog.csdn.net/weixin_41446786',
showmessage: '当前的时间是' + new Date().toLocaleString()
}
})
</script>
3、if条件渲染：通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
- v-if
- v-if和v-else：v-else要紧跟 v-if后边
<a href="#" v-if="islogin">个人中心</a>
<a href="#" v-else>登录</a>
- v-if,v-else-if和v-else
<img src="" alt="皇帝" v-if="level === 1">
<img src="" alt="皇亲" v-else-if="level === 2">
<img src="" alt="国戚" v-else-if="level === 3">
<img src="" alt="大臣" v-else>
- v-show
①v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的
②注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突
案例：
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
<a href="#" v-if="isLogin">欢迎你归来</a>
<hr>
<a href="#" v-if="level === 1">青铜</a>
<a href="#" v-else-if="level === 2">白银</a>
<a href="#" v-else>王者</a>
<hr>
<hr>
<span v-if="seen">v-if</span> <br>
<span v-show="seen">v-show</span>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isLogin:false,
level:2,
seen:false,
}
})
</script>
4、for列表渲染
v-for item in 列表
案例：
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
<ul>
<li v-for="(item,index) in items"> {{index+1}} {{item}} </li>
</ul>
<hr>
<!-- 对对象进行遍历 -->
<ul>
<li v-for="(value,key) in object">{{key}} {{value}}</li>
</ul>
<hr>
<ul>
<li v-for="todo in todos">{{todo.title}} ---- {{todo.author}}---- {{todo.publishedAt}}</li>
</ul>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
items:['python','mysql','linux','html','js','css'],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
todos: [
{title: 'Vue',author: 'Jane Doe',publishedAt: '2016-04-10'},
{title: 'python',author: 'Ricky',publishedAt: '2019-04-10'},
{title: 'Amen',author: 'cjb',publishedAt: '2020-07-28'}
]
}
})
</script>
4、methods事件：可以用v-on指令监听 DOM 事件
绑定事件：v-on:click="事件(形参,)"或者简写为@click="事件(形参,)"
事件处理：通过this来指定当前绑定的标签定义的变量
methods:{
事件:function(实参){
//通过this来指定当前绑定的标签定义的变量
this.形参
}
案例：
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
<button v-on:click="login">登陆</button> <br>
<a href="javascript:;" @click="register">注册</a>
<hr>
<button @click="add(counter)">点击+1</button>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
var vm = new Vue({
// 接管标签
el:'#app',
// 绑定数据
data:{
counter:1,
total:0,
},
// 方法
methods:{
login:function(){
alert('登录成功')
},
register:function(){
alert('进行注册操作')
},
add:function(counter){
// this 表示当前的 vue 我们通过this.total 来获取data中的变量
this.total+=counter;
alert(this.total)
}
}
})
</script>
5、model表单
- 可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素；
- v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值
- 单行文本框（初始值为空）
<input type="text" name="username" v-model="username">
<script type="text/javascript">
username:'',
</script>
- 多行文本框（初始值为空）
<textarea name="desc" v-model="desc"></textarea>
<script type="text/javascript">
desc:'',
</script>
- 单选框（初始值为空）
男 <input type="radio" name="sex" value="boy" v-model="sex">
女 <input type="radio" name="sex" value="girl" v-model="sex">
<script type="text/javascript">
sex:'',
</script>
- 多选框（初始值为
列表）
足球 <input type="checkbox" name="like" value="足球" v-model="like">
篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
<script type="text/javascript">
like:[],
</script>
- 下拉框（）
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<script type="text/javascript">
city:'',
</script>
案例：
<div id="app">
<table border="1">
<tr><td>用 户 名</td><td><input type="text" v-model="username" @blur="checkusername"> </td></tr>
<tr><td>密码</td><td><input type="password" v-model="password1"> </td></tr>
<tr><td>确认密码</td><td><input type="password" v-model="password2"></td></tr>
<tr><td>性别</td>
<td>
男<input type="radio" name="sex" value="boy" v-model="sex">
女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
</tr>
<tr><td>爱好</td>
<td>
足球 <input type="checkbox" name="like" value="足球" v-model="like">
篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
</td>
</tr>
<tr><td>所在城市</td>
<td>
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr><td>个人简介</td><td><textarea name="desc" v-model="desc"></textarea> </td></tr>
</table>
<button @click="register">注册</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
username:'',
password1:'',
password2:'',
sex:'',
like:[],
city:'',
desc:''
},
methods:{
register:function(){
alert(this.username+this.password1+this.password2+this.sex+this.like+this.city+this.desc)
},
checkusername:function(){
alert(this.username)
}
}
})
</script>
6、ES6语法
ES6语法入门
ES6是JavaScript语言的新版本，它也可以叫做ES2015，vue组件开发中使用更多的ES6的语法，ES6兼容ES5语法（之前学习的版本）
（1）变量说明
- var:它是用来声明变量的。
如果在方法中声明，则为局部变量；如果在全局中声明，则为全局变量。
var num=10
变量一定要在声明后使用，否则报错
- let:ES6新增了let命令，用来声明变量。它的用法类似于var，但是所
声明的变量，只在let命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
for循环的计数器，就很合适使用let命令：计数器i只在for循环体内有效，在循环体外引用就会报错。
for (let i = 0; i < 10; i++) {}
- const:声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.1415;
（2）Javascript对象的写法
- ES5的写法
var person = {
name:'itcast',
age:13,
say:function(){
alert('hello')
}
}
person.say()
也可以简写为：
var person = {};
person.name='itheima';
person.age=13;
person.say = function (){alert('hello')}
person.say();
- ES6的写法
//定义变量
var name='itcast';
var age=13;
//创建对象
var person = {
name,
age,
say:function(){
alert('hello');
}
};
//调用
person.say()
（3）ES6的箭头函数
- 定义函数新的方式；
//无参数,无返回值
var say = ()=> {
alert('我是无参数无返回值函数');
}
//有参数,无返回值
var eat = food => {
alert('我喜欢吃'+food);
}
//有参数,有返回值
var total = (num1,num2) => {
return num1+num2;
}
- 改变this的指向
如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题
var person = {
name:'itcast',
age:13,
say:function(){
alert('my name is ' + this.name);
}
}
//调用
person.say()
7、Vue的生命周期
beforeCreate
vm对象实例化之前
created
vm对象实例化之后
beforeMount
vm将作用标签之前
mounted(重要时机初始化数据使用)
vm将作用标签之后
beforeUpdate
数据或者属性更新之前
updated
数据或者属性更新之后
8、axios发送ajax请求
axios github
（1）准备工程
创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文件
（2）准备html和html显示
在模板文件中创建一个axios.html,内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{ message }}</span> <br>
<a href="javascript:;">登录</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
delimiters:["[[","]]"],
data: {
message: 'Hello Vue!',
},
})
</script>
</html>
（3）创建视图并加载模板的html
#url设置
from django.conf.urls import url
from users.views import ShowLoginView
urlpatterns = [
url(r'^show/$',ShowLoginView.as_view()),
]
#视图
class ShowLoginView(View):
def get(self,request):
return render(request,'axios.html')
（4）导入axios,并发送GET/POST请求
- 因为Vue的模板变量和django的模板变量分隔符冲突,所以需要修改Vue的分隔符delimiters:["[[","]]"]
- 箭头函数解决这个指向的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<span>{{ message }}</span> <br>
<span>[[ message ]]</span> <br>
<a @click="login" href="javascript:;">登录-GET</a> <br>
<a @click="login2" href="javascript:;">登录-GET2</a> <br>
<a @click="login3" href="javascript:;">登录-POST</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
delimiters:["[[","]]"],
data: {
message: 'Hello Vue!',
},
methods:{
login:function(){
let url = 'http://127.0.0.1:8000/login/?username=admin&password=123';
axios.get(url).then(response=>{
if(response.data.code == '200'){
this.message=response.data.info.username;
}else if (response.data.code == '400') {
this.message=response.data.msg;
}
}).catch(error=>{
console.log(error)
})
},
login2:function(){
let url = 'http://127.0.0.1:8000/login/';
axios.get(url,{
params:{
"username":"admin",
"password":"123"
}
}).then(response=>{
if(response.data.code == '200'){
this.message=response.data.info.username;
}else if (response.data.code == '400') {
this.message=response.data.msg;
}
}).catch(error=>{
console.log(error)
})
},
login3:function(){
let url = 'http://127.0.0.1:8000/login/';
axios.post(url,{
"username":"admin",
"password":"123"
}).then(response=>{
if(response.data.code == '200'){
this.message=response.data.info.username;
}else if (response.data.code == '400') {
this.message=response.data.msg;
}
}).catch(error=>{
console.log(error)
})
}
}
})
</script>
</html>
后台代码
#定义路由
from django.conf.urls import url
from users.views import ShowLoginView, LoginView
urlpatterns = [
url(r'^show/$',ShowLoginView.as_view()),
url(r'^login/$',LoginView.as_view()),
]
#定义视图
class LoginView(View):
def get(self, request):
#获取参数
username = request.GET.get('username')
password = request.GET.get('password')
#验证参数并返回相应
if username == 'admin' and password == '123':
return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
else:
return JsonResponse({'code': 400,'msg':'账号或密码错误'})
def post(self, request):
# 获取参数
data = json.loads(request.body.decode())
username = data.get('username')
password = data.get('password')
# 验证参数并返回相应
if username == 'admin' and password == '123':
return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
else:
return JsonResponse({'code': 400,'msg':'账号或密码错误'})
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
