<script src = "https://unpkg.com/vue@next"></script>
// front 是项目名
vue create front
<!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({}) 去创建一个应用
// 传入的参数表示,这个应用最外层的组件应该如何展示
const app = Vue.createApp({
data() {
return {
msg:"hello world!"
}
},
template:`<div>{{msg}}</div>`
});
// 将 app对应的应用挂载(只作用)在 id = "root"的元素上
// vm 代表的就是 vue 应用的根组件,其充当了 vm层的角色
const vm = app.mount('#root');
</script>
</html>
// 使用 Vue.createApp({}) 去创建一个应用
// 传入的参数表示,这个应用最外层的组件应该如何展示
const app = Vue.createApp({
data() {
return {
msg:"hello world!"
}
},
// 生命周期函数
// 在实例生成之前会自动执行的函数
beforeCreate() {
},
// 在实例生成之后会自动执行的函数
created() {
},
// 在组件内容被渲染到页面之前会自动执行的函数
beforeMount() {
},
// 在组件内容被渲染到页面之后会自动执行的函数
mounted() {
},
// 当 data 中的数据发生改变时会立即自动执行的函数
beforeUpdate(){
},
// 当 data 中的数据发生变化,同时页面重新完成更新后,会自动执行的函数
updated(){
},
// 当 Vue 实例(应用)失效时,自动执行的函数
beforeUnmount() {
},
// 当 Vue 实例(应用)失效时,且 dom 完全销毁之后,自动执行的函数
unmounted() {
}
});
// 将 app对应的应用挂载(只作用)在 id = "root"的元素上
// vm 代表的就是 vue 应用的根组件,其充当了 vm层的角色
const vm = app.mount('#root');
<script>
// 使用 Vue.createApp({}) 去创建一个应用
// 传入的参数表示,这个应用最外层的组件应该如何展示
const app = Vue.createApp({
data() {
return {
msg:"<strong>hello world!</strong>"
}
},
template:`<div v-html="msg"></div>`
});
// 将 app对应的应用挂载(只作用)在 id = "root"的元素上
// vm 代表的就是 vue 应用的根组件,其充当了 vm层的角色
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
disabled: true
}
},
template:`<input v-bind:disabled= "disabled" />`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: "弹出",
}
},
methods: {
handleClick() {
alert('click');
}
},
template:`<div v-on:click="handleClick">{{message}}</div>`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello world!",
show: false,
name: 'title',
event: 'click'
}
},
methods: {
handleClick() {
alert('click');
}
},
template:`<div :[name]="message" @[event]="handleClick">{{message}}</div>`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello world!"
}
},
template:`<div v-once>{{message}}</div>`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello world!",
elseMessage: "elseMessage",
show: false
}
},
template:`
<div v-if="show">{{message}}</div>
<div v-else>{{elseMessage}}</div>
`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello'
}
},
template:`
<div>
{{message}}
<input v-model="message"/>
</div>
`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello'
}
},
template:`
<div>
{{message}}
<textarea v-model="message"/>
</div>
`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: []
}
},
template:`
<div>
{{message}}
A <input type="checkbox" v-model="message" value="A"/>
B <input type="checkbox" v-model="message" value="B"/>
C <input type="checkbox" v-model="message" value="C"/>
</div>
`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: ''
}
},
template:`
<div>
{{message}}
A <input type="radio" v-model="message" value="A"/>
B <input type="radio" v-model="message" value="B"/>
C <input type="radio" v-model="message" value="C"/>
</div>
`
});
const vm = app.mount('#root');
</script>
<script>
const app = Vue.createApp({
data() {
return {
message: '',
options: [
{value: 'A'},
{value: 'B'},
{value: 'C'},
{value: 'D'},
{value: 'E'}
]
}
},
template:`
<div>
{{message}}
<select v-model="message">
<option v-for="item in options">{{item.value}}</option>
</select>
</div>
`
});
const vm = app.mount('#root');
</script>
v-model 修饰符:
- lazy 修饰符:数据改变的时候不实时跟着改变,当改变完成失去焦点时才改变
- number 修饰符:将数据转为 number 类型再存到绑定的变量
- trim 修饰符:去除内容前后的空格
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello'
}
},
template:`
<div>
{{message}}
<input v-model.lazy="message" />
</div>
`
});
const vm = app.mount('#root');
</script>