|
一套基于js开发的构建用户界面的渐进式框架，简化了Dom操作，响应式数据驱动。
文档网址
Vue.js (vuejs.org)
引入方法
- 开发环境版本，包含了有帮助的命令行警告，适合学习使用
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- 生产环境版本，优化了尺寸和速度，但是没有代码提示
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
起步
el挂载点，data数据对象，方法
注意范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 基础</title>
</head>
<body>
<div id="app">
{{ message }}
{{ school }}
{{ school.name }}
<ul>
<li>{{ grade[0] }}</li>
<li>{{ grade[1] }}</li>
<li>{{ hello() }} </li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message: 'hello cat',
school:{
name:"小明",
age:12
},
grade:["英语","化学"]
},
methods:{
hello() {
return "hello Vue";
}
}
})
</script>
</body>
</html>
vue指令
v-text 设置标签的文本值，会直接替换标签的内容
<h1 v-text="message"></h1>
关于字符串拼接
<h1 v-text="message + ' 喵~'">he</h1>
<h2>{{ message + '喵'}} </h2>
v-html 设置标签的innerHTML
js：
var a = document.getElementById('a')
a.innerHTML = '<a href="#">hello</a>'
vue:
<div id="app">
<p v-html="content"></p>
</div>
var app = new Vue({
el:"#app",
data: {
message: 'hello cat',
content:'<a href="#">hello</a>',
})
v-on 为元素绑定事件
js支持在标签中直接绑定事件，语法为
<p on***="function"></p>
on***是事件名。最常用的有鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout
在vue中的语法为
<h3 v-on:click="hello(111)">hello</h3>
<input type="text" @keyup.enter="hello(‘hello’)">
<script>
var app = new Vue({
el:"#app",
data: {
message: 'hello cat',
},
methods:{
hello(a) {
alert(a)
}
}
})
</script>
其中v-on:可以简化为@，后面跟上函数名即可,事件的后面跟上.修饰符可以限制触发条件
vue中修改页面元素
由于vue是响应式框架，如果要更改页面元素，不需要再去操作dom元素，而是可以直接修改数据
<div id="app">
<p @click="change"> {{ name }} </p>
</div>
var app = new Vue({
el:"#app",
data: {
name:'小明'
},
methods:{
change() {
this.name = '小红'
}
}
})
一个测试：
<div id="app">
<button @click="sub"> - </button>
<span> {{ num }} </span>
<button @click="add"> + </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
add(){
this.num++
},
sub(){
this.num--
}
}
})
</script>
v-show 根据条件控制元素的显示与隐藏(控制css中的display)
<div id="app">
<img src="img/22.jpeg" alt="" v-show="num>9">
</div>
v-if 根据条件控制元素的显示与隐藏（创建与销毁元素）
<div id="app">
<img src="img/22.jpeg" alt="" v-if="num>9">
</div>
v-bind 设置元素属性（简写‘：’）
<div id="app">
<img :src="imgsrc" alt="">
<img :src="imgsrc" alt="" :class="{small:isTrue}" @click="changeTrue"> // class属性有特殊的判断用法
</div>
<script>
var app = new Vue({
el:"#app",
data: {
imgsrc:'img/22.jpeg',
isTrue:true
},
methods:{
changeTrue() {
this.isTrue = !this.isTrue
}
}
})
</script>
v-for 根据数据生成列表结构 当li里面有字符时，会生成多个一样的字符，item可修改，对应的是数组中每一项的内容
<div id="app">
<ul>
<li v-for="item in grade">
科目：{{ item }}
</li>
</ul>
<h1 v-for="item in eat">
{{ item }}
</h1>
<h1 v-for="item in eat" :title="item.name">
{{ item.name }}
</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
grade:["英语","化学","生物"],
eat:[
{name:"苹果"},
{name:"香蕉"},
{name:"梨"}
]
}
})
</script>
v-model 获取和设置表单元素的值（双向数据绑定）,可以实施修改数据，非常方便。同时，如果修改了message，input的value也会实时改变
<div id="app">
<h2 id="a">{{ message }} </h2>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data: {
message: 'hello cat'
}
})
</script>
axios
Axios 是一个基于 promise 的 HTTP 库，可以发送get、post请求的网络请求库
官网：起步 | Axios 中文文档 (axios-http.cn)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在这里要注意axios回调函数中的this已经改变，无法获得data中的数据，需要提前把this保存起来
<div id="app">
<input type="button" value="获取笑话" @click="get">
<input type="button" value="post" @click="post">
<p>{{ joke }}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"笑话"
},
methods:{
get(){
var that = this
axios.get("https://autumnfish.cn/api/joke").then(function(response){
console.log(response.data);
that.joke = response.data
},function(err){
console.log(err);
})
},
post(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"aa"}).then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
}
})
</script>
组件
从UI界面角度拆分Vue代码
全局组件：
template中只能由一个根元素
Vue.component('cat',{
template:'<h1>喵</h1>'})
局部组件：
这时组件只能在父元素下使用
<div id="app">
<cat></cat>
</div>
<script>
var Cat = {
template: '<h1>喵!</h1>'
}
new Vue({
el: '#app',
components: {
'cat': Cat
}
})
</script>
|