Exercise
Application
Hello World
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1、引入vue.js
2、定义一个div，id为app
3、创建Vue实例
4、显示Vue的数据
-->
{{name}}
<p>{{name}}</p>
</div>
<script>
//实例化vue即创建vue案例，vue有七大属性(唯一根元素)
var vm = new Vue({
/*属性1：el，表示当前Vue要控制的页面区域，el的属性值是一个字符串，一个选择器，
通过el将vue实例与div进行绑定，绑定之后，vue就可以操作div及其子元素，并且数据也可以显示在div内部*/
el: '#app',
//属性2：date(vue实例数据对象),表示当前Vue要控制的区域的数据，date的属性值是一个对象
data: {
name: 'Vue实例绑定成功'
}
//属性3：template：用来设置模板，会替换页面元素，包括占位符
//属性4：methods:放置页面中的业务逻辑，js方法一般都放置在methods中
//属性5：render：创建真正的Virtual Dom
//属性6：computed:计算属性，保存计算结果
//属性7：watch:监听data中数据的变化。两个参数，一个返回新值，一个返回旧值
//components:定义子组件、filters:过滤器
})
console.log(vm.$data.name);
console.log(vm.name);
</script>
</body>
</html>
标签绑定
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on是事件监听，v-bind是单向绑定,v-model:双向绑定,{{msg}}:插值表达式 -->
<button v-on:click="hi">click</button>
<br>
<span v-bind:title='msg'>
悬停信息提示
</span>
<input type="text" v-bind:value="msg" />{{msg}}
<input type="text" v-model="msg" />{{msg}}
<br><br>
<input type="text" v-model.lazy="a_0" />
<!-- .lazy(焦点变更即更新) .number(只留数字) .trim(去首尾空格)等 -->
<br>{{a_0}}<br>
<input type="checkbox" v-model="a_1" />我想
{{a_1}}
<p>你想选啥
<input type="checkbox" v-model="a_2" value="1号" />1号
<input type="checkbox" v-model="a_2" value="2号" />2号
<input type="checkbox" v-model="a_2" value="3号" />3号
</p>
{{a_2}}
<p>你还想选啥
<input type="radio" v-model="a_3" value="1号" />1号
<input type="radio" v-model="a_3" value="2号" />2号
<input type="radio" v-model="a_3" value="3号" />3号
</p>
{{a_3}}
<br>
<div v-html="url"></div><br>
<!-- v-show是显示/隐藏，v-if是创建/删除 -->
<div v-show="isShow">看到我没</div><br>
<div v-if="isHave">那我呢</div><br>
<button v-on:click="zhe">点这儿</button><br>
<br>
<h1 v-if="type==='L'">L</h1>
<h1 v-else-if="type==='XL'">XL</h1>
<h1 v-else-if="type==='XXL'">XXL</h1>
<!-- vm.type = 'XXL'则会改变h1提示的信息 -->
<br>
<li v-for="(item,i) in items">
值：{{item}}，索引：{{i}}
</li>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js',
a_0: '',
a_1: false,
a_2: [],
a_3: '',
url: '<h1>v-html与v-show</h1>',
isShow: false,
isHave: false,
type: 'L',
items: ['大?', '加大?', '加加大'] //push可以增加数组元素，最好使用Vue.set(vm.item,0,'好大')，如果是对象，也可以选set
},
methods: { //方法必须定义在methods事件中，通过v-on绑定
hi: function () {
alert(this.msg)
},
zhe: function () {
this.isShow = !this.isShow;
this.isHave = !this.isHave;
}
}
});
</script>
</body>
</html>
Axios异步通信
Axios 是一个开源的可以用在浏览器端和 Node JS 的异步通信框架，主要作用是实现AJAX异步通信。
特点：
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF（跨站请求伪造）
<!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>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="vue">
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<!-- 只要不是<div>类型的都要写v-bind -->
<a v-bind:href="info.url">点这儿</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data() {
return { //请求返回的参数必须和json字符串一样
info: {
name: null,
address: {
street: null,
city: null,
country: null
},
url: null
}
}
},
mounted() { //钩子函数，链式编程
axios.get('/data.json').then(response => (this.info = response.data));
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<!-- 如果上述地址失效，实验不成功，则需要更换CDN源或者手动下载文件并引用 -->
</head>
<body>
<!-- 这是View 现在就是template模板-->
<div id="app">
<button v-on:click='x_1'>点这儿</button>
<button v-on:click='x_2'>点这儿</button>
{{ getdata }}
</div>
<!-- 注意如果是vscode要安装插件Live Server开启HTTP服务 -->
<script>
var vm = new Vue
(
{
el: '#app',
data:
{
getdata:'',
},
// mounted()
// {
// axios.get('/data.json').then
// (
// response=>
// (
// console.log(response.data)
// // 注意.data才是数据
// )
// );
// axios.get('/data.json').then(response=>(this.getdata = response.data));
// },
// ==================mounted安装（钩子函数）自动调用==================
mounted: function ()
{
axios.get('/data.json').then(response=>(console.log(response.data)));
axios.get('/data.json').then(response=>(this.getdata = response.data));
},
// ==================methods方法（七大属性之一） 需要被调用==================
methods:
{
x_1:function(){axios.get('/data.json').then(response=>(console.log(response.data)))},
x_2:function(){axios.get('/data.json').then(response=>(this.getdata = response.data))},
}
}
);
</script>
</body>
</html>
{
"name": "广州ttg",
"url": "https://weibo.com/u/6383293935",
"page": "1",
"address": {
"street": "Tianhe",
"city": "Guangzhou",
"country": "China"
},
"links": {
"name": "武汉es",
"url": "https://weibo.com/u/6025941641"
}
}
计算属性computed
计算出来的结果，保存在属性中。内存中运行：虚拟Dom
Vue特有的计算属性：1、计算结果保存在内存中 2、重复调用不变，类似缓存
使用的时候，是调用属性（即cTime2没有括号），而非方法
基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- view层 -->
<div id="app">
<p>cTime1{{ cTime1() }}</p>
<p>cTime1{{ cTime2 }}</p>
<!-- <p>cTime1{{ cTime2() }}</p>这样写错误 -->
</div>
<!-- 导入Vue.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
var vm = new Vue
(
{
el: "#app",
data:
{
message: "Hello , FastAPI"
},
methods: // 方法
{
cTime1: function () {
return Date.now();
}
},
computed: // 注意方法不与上面methods里面的重名
{
cTime2: function () {
this.message; // 当这个值被赋予新值后，Date.now会重新计算
return Date.now();
}
},
}
)
</script>
</body>
</html>
应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="inputing" />
<ul>
<li v-for="d in myList">
{{d}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue
(
{
el: "#app",
data:
{
inputing: "",
list: ["Hi", "Ha", "Hab", "Habc", "Habcd"],
},
computed: //1、计算结果保存在内存中 2、重复调用不变，类似缓存
{
myList: function () {
//假设在内存中：["Hi","Ha","Hab","Habc","Habcd"]
return this.list.filter
(
item =>
item.indexOf(this.inputing) > -1
)
/*filter对数组中的每个元素都执行一次指定的函数(callback)，并且创建一个新的数组
indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置
如果要检索的字符串值没有出现，则该方法返回-1*/
}
},
}
)
</script>
</body>
</html>
组件component（非单一）
注意事项：1、必须一个根节点（root element），只要与内部标签不冲突。
2、组件间可通过props进行通讯
3、组件可以有多个属性，但是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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 这是View 现在就是template模板-->
<!-- 这里是根组件的templet模板 -->
<div id="app">
<abar></abar>
<!-- <abar></abar>放在根组件的child中，就是根组件的child -->
<bbar></bbar>
</div>
<script>
// 全局定义（注册）组件
Vue.component
(
'abar',
{
template: `
<div style='background:#ccc'>
【公共root组件的child组件：abar组件】
<button @click='ccc'>确定</button>
<child></child>
<abar_child></abar_child>
</div>`,
data() //注意这里的data写法，不能写属性
{
return { abarname: "abarname" }
},
methods:
{
ccc() {
alert('abar');
}
},
// 样式要单文件组件的写法才可实现
components: // 局部定义（注册）组件
{
abar_child:
{
template: `<div>【abar_child组件，只能在abar组件中使用】</div>`
}
}
}
);
Vue.component
(
'child',
{
template: `<div>【公共child组件】</div>`
}
);
Vue.component
(
'bbar',
{
template: `
<div>
【与abar的同级兄弟组件：bbar组件】
<child></child>
</div>`
}
)
var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
(
{
el: '#app',
}
)
</script>
</body>
</html>
父传子
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 这是View 现在就是template模板-->
<!-- 这里是根组件的template模板 -->
<div id="app">
<bbar thename='主页' :show='false'></bbar>
<bbar thename='简介' :show='true'></bbar>
<bbar thename='产品' :show='true'></bbar>
<br>
---------------------------
<br>
<bbar :thename='p_name'></bbar>
<br>
</div>
<script>
Vue.component
(
'bbar',
{
template: `
<div>
>>>
<button v-if='show' @click='c'>首页</button>
【root的child组件：bbar组件】【{{ thename }}】
</div>`,
// props: ['thename','show'] // 接受父组件传进来的属性
props: // 接受父组件传进来的属性
{
thename: String,
show: Boolean,
// show:String, // 这样会有问题
},
methods: {
c() {
alert('首页');
}
},
}
)
var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
(
{
el: '#app',
data:
{
p_name: 'root组件的p_name属性'
// 即父组件传参给子组件使用bind绑定
},
}
)
</script>
</body>
</html>
子传父
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 这是View 现在就是template模板-->
<!-- 这里是根组件的templet模板 -->
<div id="app">
<bbar @b_event='receive($event)'></bbar>
<br>
{{ show }}
</div>
<script>
Vue.component
(
'bbar',
{
template: `
<div>
【root的child组件：bbar组件】
<button @click='send()'>点这发送给父组件</button>
</div>`,
methods:
{
send() {
this.$emit('b_event', '你好') // 分发事件
// this.$emit('b_event',this.xxxxx)
// // 这里也可以传data的属性
}
},
}
)
var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
(
{
el: '#app',
data:
{
p_name: 'root组件的p_name属性（使用bind绑定）',
show: []
},
methods:
{
receive(e) { this.show.push(`【父组件收到消息！${e}】`) }
},
}
)
// 举例说明子传父的应用
</script>
</body>
</html>
refs
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 这是View 现在就是template模板-->
<!-- 这里是根组件的templet模板 -->
<div id="app">
<input type="text" ref='input_ref'>
<button @click='click_a'>点这</button>
<bbar ref='bbar_ref'></bbar>
</div>
<script>
Vue.component
(
'bbar',
{
template: `
<div>
【root的child组件：bbar组件】
</div>`,
data() {
return { bbar_name: '我叫bbar' }
},
methods:
{
f(data) {
console.log('这是bbar的方法', data);
}
},
}
)
var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
(
{
el: '#app',
data:
{
},
methods:
{
click_a() {
console.log(this.$refs.input_ref.value);
console.log(this.$refs.bbar_ref.bbar_name);
this.$refs.bbar_ref.f('');
this.$refs.bbar_ref.f('父传子消息');
// ref放标签上，拿到原生节点
// ref放组件上，拿到组件对象
}
},
}
)
</script>
</body>
</html>
事件总线
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 这是View 现在就是template模板-->
<!-- 注意：未来学习的状态管理（vuex）可完成本节内容 -->
<div id="app">
<bbar></bbar>
<cbar></cbar>
</div>
<script>
Vue.component
(
'bbar',
{
template: `
<div>
【bbar组件 希望发送给cbar】
<input type="text" ref='b_text' />
<button @click='send()'>点这发送cbar</button>
</div>`,
methods: {
send() {
bus.$emit('c_message', this.$refs.b_text.value)
}
},
}
);
Vue.component
(
'cbar', // 这个负责监听
{
template: `
<div>
【我是cbar】
</div>`,
mounted() // 当前组件DOM创建后的钩子函数
{
bus.$on('c_message', (data) => { console.log('已收到bbar的消息', data); });
},
}
);
var bus = new Vue(); // 空Vue实例，即中央事件总线
var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
(
{
el: '#app',
data: {},
}
)
</script>
</body>
</html>
动态组件
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<keep-alive>
<component :is="who"></component>
<!-- 注意这里的切换组件，是直接删掉和创建 -->
<!-- 如果需要保持home组件的input状态，需要keep-alive包裹 -->
</keep-alive>
<ul>
<li><a @click="who='home'">首页</ a>
</li>
<li><a @click="who='news'">新闻</ a>
</li>
<li><a @click="who='blog'">博客</ a>
</li>
</ul>
</div>
<script>
var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
(
{
el: '#app',
data: {
who: 'home'
},
components: {
"home": {
template:
`<div>
home
<input type="text">
</div>`
},
"news": {
template: `<div>news</div>`
},
"blog": {
template: `<div>blog</div>`
},
}
}
)
</script>
</body>
</html>