1-1 初学编写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://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
template: '<div>hello world</div>'
}).mount('#root');
</script>
</html>
创建一个app实例,挂载到id为root的节点上
<script>
Vue.createApp({
data() {
return {
content: 1
}
},
mounted () {
setInterval(() => {
this.content += 1
}, 1000)
},
template: '<div>{{content}}</div>'
}).mount('#root');
</script>
{{}}
里面写js表达式
1-2 编写字符串反转和内容隐藏小功能
字符串反转
<script>
Vue.createApp({
data () {
return {
content: 'hello world'
}
},
methods: {
handleButtonClick() {
const newContent = this.content.split('').reverse().join('')
this.content = newContent
}
},
template: `
<div>
{{content}}
<button @click="handleButtonClick">反转</button>
</div>
`
}).mount('#root');
</script>
内容显示/隐藏
<script>
Vue.createApp({
data () {
return {
content: '123',
show: true
}
},
methods: {
handleButtonClick() {
this.show = !this.show
}
},
template: `
<div>
<span v-if="show">{{content}}</span>
<button @click="handleButtonClick">显示/隐藏</button>
</div>
`
}).mount('#root');
</script>
1-3 编写TodoList小功能,了解循环和双向绑定
<script>
Vue.createApp({
data () {
return {
inputValue: '',
list:[]
}
},
methods: {
handleButtonClick() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue" />
<button @click="handleButtonClick">增加</button>
<ul>
<li v-for="(item, index) of list">
{{item}} - {{index}}
</li>
</ul>
</div>
`
}).mount('#root');
</script>
太基础了,就不多解读了^ ^
1-4 组件概念初探,对 TodoList 进行组件代码拆分
<script>
const app = Vue.createApp({
data () {
return {
inputValue: '',
list:[]
}
},
methods: {
handleButtonClick() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue" />
<button @click="handleButtonClick">增加</button>
<todo-item v-for="(item, index) of list" :content="item" :index="index" />
</div>
`
})
app.component('todo-item',{
props: ['content', 'index'],
template: '<div>{{content}} -- {{index}}</div>'
})
app.mount('#root')
</script>
太基础了^ ^ 自己理解