Vue介绍
Vue.js读音 /vju:/，类似于 view；
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；
Vue.js是一套构建用户界面的，渐进式框架
通俗的说：
- Vue.js是一个构建数据驱动的 web 界面的渐进式框架
- vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
- 核心是一个响应的数据绑定系统
- Vue是前端三大 新框架 之一
Vue的作用
作为一个js库，可以用它构建Web界面。
Vue的特点：
1.一个构建数据驱动的web界面的渐进式框架
2.通过尽可能简单的API实现响应的数据绑定和组合的视图组件
Vue.js使用文档及下载Vue.js
- Vue.js使用文档已经写的很完备和详细了，通过一下地址可以查看：
https://cn.vuejs.org/v2/guide/
- Vue.js如果当成一个库来使用，可以通过下面地址进行下载：
https://cn.vuejs.org/v2/guide/installation.html
Vue的基本使用步骤
- 导包
官方提供了俩个包开发包(vue.js)和生产包(vue.min.js)
<script src='./js/vue.js'></script>
- HTML显示
<div class='box'>{{content}}</div>
- 使用Vue
注意：定义标签 设置好选择器 可以用类也可以是其他选择器 在js中使用vue提供数据，代码中的el和data属性是不能改变的，data中的数据中的content传入到标签，名字必须一样
window.onload = function (){
var vm = new Vue({
el:'box',
data:{
content:'Vue的基本使用'
}
})；
}
Vue的基本语法
v-bind 绑定元素，实现监听事件 Vue的 {{}} 语法和flaskdjango里的模板语言冲突 可以修改为自己定义 如下代码中的[[]]
- 1.在属性前 添加
v-bind:可以省略只写: - 2.属性的值 就可以写到Vue对象里的
data中了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
// 定义Vue对象
var app = new Vue({
// 定义变量el和data 注意：变量不能改变
el: '.box',
// 转换格式
delimiters: ['[[', ']]'],
data: {
// 显示在网页的数据
content: 'Hello Vue',
// 在网页上链接的名字
linkdata: '百度',
// 请求的链接路径
url: 'http://www.baidu.com'
},
})
}
</script>
</head>
<body>
<div class="box">
<div>[[content]]</div>
<!-- 利用v-bind绑定事件 传入Vue对象里的data中的数据 -->
<a v-bind:href="url" target="_blank">[[linkdata]]</a>
<!-- 利用v-bind绑定事件 传入Vue对象里的data中的数据-->
<a :href="url" target="_blank">[[linkdata]]</a>
</div>
</body>
</html>
事件的使用
点击事件
- 添加methods
- 在标签中用@click使用添加好的js方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
// 定义Vue对象
var app = new Vue({
// 定义变量el和data 注意：变量不能改变
el: '.box',
// 转换格式
delimiters: ['[[', ']]'],
data: {
count: 0,
},
// 方法
methods: {
AddClick: function () {
this.count += 1;
}
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- 添加@click绑定点击事件 -->
<button @click="AddClick">[[count]]</button>
</div>
</body>
</html>
if判断控制标签 是否渲染
注意v-if和v-show区别
- vif直接让标签不渲染 也就不会显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
// 定义Vue对象
var app = new Vue({
// 定义变量el和data 注意：变量不能改变
el: '.box',
// 转换格式
delimiters: ['[[', ']]'],
data: {
flag: 3,
isshow: false,
},
})
}
</script>
</head>
<body>
<div class="box">
<!-- 条件渲染 -->
<p v-if="flag==1">Java</p>
<p v-else-if="flag==2">Python</p>
<p v-else-if="flag==3">C++</p>
<p v-else>else</p>
<!-- isshow的使用 -->
<p v-if="isshow">PHP</p>
<!-- v-show可以控制标签的display属性 是否显示标签 -->
<p v-show="isshow">Go</p>
</div>
</body>
</html>
v-show可以控制标签的display属性 是否显示标签
for循环遍历列表
- 1.创建js数据
<script>
window.onload = function () {
// 定义Vue对象
var app = new Vue({
// 定义变量el和data 注意：变量不能改变
el: '.box',
// 转换格式
delimiters: ['[[', ']]'],
data: {
// 01：普通列表
itemList:[1,2,3,4,5],
// 02：列表下标
indexList:['a','b','c','d'],
// 03：有且只有一个对象
objData:{
name:'小明',
age:19
},
// 04：对象列表
objList:[
{
name:'小明',
age:20,
},
{
name:'小红',
age:18
}
]
},
})
}
</script>
- 2.for循环显示
<body>
<div class="box">
<!-- 普通列表 -->
<li v-for="item in itemList">[[item]]</li>
<!-- 列表下标 -->
<li v-for="index in indexList">[[index]]</li>
<!-- 有且只有一个对象 -->
<li v-for="item in objData">[[item]]</li>
<li v-for="(obj,key) in objData">[[obj]]---[[key]]</li>
<!-- 对象列表 -->
<li v-for="obj in objList">[[obj.name]]==[[obj.age]]</li>
</div>
</body>
表单
- @blur焦点失去的事件
- 可以用v-model指令在标签元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
//定义变量el和data
el: '.box',
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>
</head>
<body>
<div class="box">
<table border="1">
<tr>
<td>用 户 名</td>
<td><input type="text" v-model="username" @blur="checkusername"></td>
<td>{{username}}</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" v-model="password1"></td>
<td>{{password1}}</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" v-model="password2"></td>
<td>{{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>
<td>{{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>
<td>{{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>
<td>{{city}}</td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea name="desc" v-model="desc"></textarea></td>
<td>{{desc}}</td>
</tr>
</table>
<button @click="register">注册</button>
</div></html>
变量定义
- var let const
- let const 没有预解析
- const是定义常量 不能修改
console.log(num1);
var num1 = 10;
let num2 = 20;
console.log(num2);
num2 = 200;
const num3 = 30;
console.log(num3);
//num3 = 300; 常量 不能修改
箭头函数
- 箭头函数体内的
this对象，就是定义该函数时所在的的作用域指向的对象，而不是使用时在的作用域指向的对象。
var name = 'lhl'
var a = {
name: 'a',
sayHello:function () {
console.log(this.name);
}
}
a.sayHello(); // 输出a
var b = {
name:'b'
}
a.sayHello.call(b); // 输出b
a.sayHello.call(); // 不传参数指向全局window对象，输出window.name也就是window
var name = 'window';
var A = {
name: 'A',
sayHello: () => {
console.log(this.name)
}
}
A.sayHello();// 输出的是window
var name = 'window';
var A = {
name: 'A',
sayHello: function(){
var s = () => console.log(this.name)
return s//返回箭头函数s
}
}
var sayHello = A.sayHello();
sayHello();// 输出A
var B = {
name: 'B';
}
sayHello.call(B); //还是A
sayHello.call(); //还是A
733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
