98 lines
2.0 KiB
HTML
98 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="app">
|
||
<input type="text" v-model="firstName" value="123">
|
||
<input type="text" v-model="lastName">
|
||
<input type="text" v-model="name">
|
||
<button @click="save(1)">显示1</button>
|
||
<button @click="save(2)">显示2</button>
|
||
<button @click="save(3)">显示3</button>
|
||
<ol>
|
||
<!-- 变量对应的dom，li，变动-->
|
||
<li v-for="(todo,index) in todos" :key="index">
|
||
{{ todo.text }}-{{ index }}
|
||
</li>
|
||
</ol>
|
||
<ol>
|
||
<!-- 变量对应的dom，li，变动-->
|
||
<li v-for="todo in todos">
|
||
{{ todo.text }}
|
||
</li>
|
||
</ol>
|
||
<div v-bind:style="styleObject">123123</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script>
|
||
import axios from "axios";
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
styleObject: {
|
||
'color': 'red',
|
||
'font-size': '33px'
|
||
},
|
||
account: 'account',
|
||
pwd: '',
|
||
a: 'https://cn.vuejs.org/images/logo.svg',
|
||
firstName: '王',
|
||
lastName: '念超',
|
||
//响应式
|
||
todos: [
|
||
//变量，变了
|
||
{text: '学习 JavaScript'},
|
||
{text: '学习 Vue'},
|
||
{text: '整个牛项目'}
|
||
],
|
||
list: []
|
||
},
|
||
methods: {
|
||
save(type) {
|
||
this.show = type
|
||
|
||
},
|
||
},
|
||
computed: {
|
||
accountAndPwd() {
|
||
return this.account + this.pwd
|
||
},
|
||
name: {
|
||
get: function () {
|
||
return this.firstName + this.lastName
|
||
},
|
||
},
|
||
},
|
||
//监听器
|
||
watch: {
|
||
name(newVal, oldVal) {
|
||
console.log('计算属性变了', newVal, oldVal)
|
||
}
|
||
},
|
||
created() {
|
||
this.name = 1
|
||
//请求后端的数据
|
||
console.log('created')
|
||
console.log(this.name)
|
||
},
|
||
mounted() {
|
||
let ajax = new XMLHttpRequest()
|
||
ajax.onreadystatechange = e => {
|
||
if (e) {
|
||
|
||
}
|
||
}
|
||
ajax.open('xxxx')
|
||
ajax.send()
|
||
|
||
},
|
||
})
|
||
</script> |