跟刁哥学vue基础
1.VUE初始化
<body>
<div id="app">{{message}}----{{username}}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
//第一种写法
const { createApp } = Vue
createApp({
data(){
return{
message: 'hello!',
username:'ab'
}
}
}).mount('#app')
//第二种写法
//定义一个对象(需要挂载才可以使用)
// const App = {
// data(){
// return{
// message:"hi",
// username:"aa"
// }
// }
// }
//创建一个vue实例并挂载到相应的组件上
// Vue.createApp(App).mount("#app");
</script>
</body>2.钩子函数mounted
生命周期函数之一, 浏览器DOM对象全部加载完毕之后执行
<script>
const App = {
data(){
return{
count:0
}
},
mounted(){
//每秒count函数＋1
setInterval(()=>{
this.count++},1000);
},
}
Vue.createApp(App).mount("#app");
</script>3.双向绑定
加标题message里的内容v-bind:title="message"
单击事件v-on:click="plus10" 或者@click="plus10"
提交表单
<p>
<input type="text" v-model="formData.name">
<input type="text" v-model="formData.password">
<button @click="submit">提交</button>
</p>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
data(){
return{
formData:{
name:"",
password:""
},
}
},
methods:{
submit(){
console.log(this.formData)
}
},
}
Vue.createApp(App).mount("#app");
</script>4.条件渲染
推荐使用v-show，显示样式的内容用CSS做比较好 ，而且不那么消耗资源
v-if
<div v-if="flag">
v-if 直接删除标签(就是这句话),显示时在创建出来
</div>v-show
<div v-show="flag">
v-show 会加一个css样式display:none隐藏
</div><button @click="show">隐藏</button>
<script>
const App = {
data(){
return{
flag:true
}
},
methods:{
show(){
this.flag=!this.flag;
}
}
}</script>5.列表循环结构
<ol>
<li v-for="todo in todos">{{todo.text}},{{todo.time}}</li>
</ol>
<script>
const App = {
data(){
return{
todos:[
{text:"吃饭",time:"7:00"},
{text:"睡觉",time:"8:00"},
]
}
},
}
</script>6.组件 components
v-bind是属性绑定
<body>
<div id="app">
<ol>
<!-- todo-item就是组件TodoItem的小写.-->
<!-- todoItem -> todo -> props-->
<todo-item v-for="todoItem in todos" v-bind:todo="todoItem"></todo-item>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
//自定义一个组件,这是一个对象.
//组件可以接收一些参数,参数可以从父组件传递
const TodoItem={
//属性
props:['todo'],
//模板, 使用着重符 ` 可以随便换行
template:`<div>
<li>{{todo.text}}----{{user}}</li>
<button @click='submit'>按钮</button>
</div>`,
data(){
return{
user:"aa",
}
},
methods:{
submit(){
console.log("hello components")
}
}
}
//定义一个对象(需要挂载才可以使用)
const App = {
data(){
return{
todos:[
{text:"吃饭"},
{text:"睡觉"},
],
};
},
components:{
//加载组件!注意是components
TodoItem,
},
};
Vue.createApp(App).mount("#app");
</script>
</body>7.生命周期函数8个
(图自官网https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram)
组件实例初始化完成之后立即调用beforeCreated(){},
【常用】页面加载完毕后发送请求,在取出数据渲染到页面上mounted(){}
8.常用标签
一次赋值，不会改变<span v-once>{{message}}</span>
可以改变值<span v-text="message"></span>
可以认识HTML标签<v-html>
9.
计算属性 computed
计算属性computed会自动缓存结果，方法不会缓存。
计算过程比较复杂，并且要重复应用，建议使用computed。方法一般用来处理事件，一般写在script中，不在body中。
<script>
const App = {
//可以监听多个属性
computed:{
publishBookMessage(){
return this.author.books.length > 0 ? "yes":"no"
}
}
}
</script>侦听器 watch
只要input中的数据改变，马上执行. 监听属性的变化
<div id="app">
<input type="text" v-model="first">
<input type="text" v-model="last"><br>
<p>full:{{full}}</p>
</div>
<script>
const App = {
data(){
return{
first:"zhang",
last:"san",
full:"zhang san"
}
},
watch:{
first(newData,oldData){
this.full = newData + " " +this.last
},
last(newData,oldData){
this.full =this.first + " "+ newData
}
}
}
Vue.createApp(App).mount("#app");
</script>计算属性与监听器
1.在计算开销比较大（计算次数多或者异步处理）的时候，尽量使用侦听器。
2.其他情况(算法比较简单时)，建议使用computed，会缓存。(会存在数据清不掉的情况。vue3已移除该属性)
10.全局挂载
无论标签<my-component></my-component>在哪里都可以使用
还可以添加样式<my-component class="aaa"></my-component>最终class显示的时c1 c2 aaa 三种样式
<script>
const myComponent = {
template:`<p class='c1 c2'>Hello</p>`,
data(){
return{ }
}
}
const App = {
data(){
return{}
},
}
//创建一个vue应用
const app = Vue.createApp(App);
//全局挂载组件
app.component("my-component",myComponent);
//挂载
app.mount("#app");
</script>
浙公网安备 33010602011771号