文章目录
Vue
一、下载Vscode
下载VSCOde,引用在线vue库,就可以编写Vue代码了。
二、填写字符串反转和内容隐藏
Vue.createApp({
data() {
return {
content: 'hello world'
}
},
methods: {
handleBtnClick() {
this.content = this.content.split('').reverse().join('');
}
},
template: `
<div>
{{content}}
<button v-on:click="handleBtnClick">反转</button>
</div>
`
}).mount('#root');
Vue.createApp({
data() {
return { show: true }
},
methods: {
handleBtnClick() {
this.show = !this.show;
}
},
template: `
<div>
<span v-if="show">hello world</span>
<button v-on:click="handleBtnClick">显示/隐藏</button>
</div>
`
}).mount('#root');
三、编写TodoList小功能,理解循环和双向绑定。
<script>
Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue);
this.inputValue = '';
}
},
template: `
<div>
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加</button>
<ul>
<li v-for="(item, index) of list">{{item}}</li>
</ul>
</div>
`
}).mount('#root');
</script>
四、认识组件概念,对TodoList进行组件拆分
<script>
// mvvm , vue 实例,vue 组件
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue);
this.inputValue = '';
}
},
template: `
<div>
<input v-model="inputValue" />
<button
v-on:click="handleAddItem"
v-bind:title="inputValue"
>
增加
</button>
<ul>
<todo-item
v-for="(item, index) of list"
v-bind:content="item"
v-bind:index="index"
/>
</ul>
</div>
`
});
app.component('todo-item', {
props: ['content', 'index'],
template: '<li>{{index}} -- {{content}}</li>'
});
app.mount('#root');
</script>
五、Vue中应用和组件的基础概念
<script>
// createApp 表示创建一个 Vue 应用, 存储到 app 变量中
// 传入的参数表示,这个应用最外层的组件,应该如何展示
// MVVM 设计模式,M -> Model 数据, V -> View 视图, VM -> ViewModel 视图数据连接层
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
template: "<div>{{message}}</div>"
});
// vm 代表的就是 Vue 应用的根组件
const vm = app.mount('#root');
</script>
六、理解Vue中的生命周期函数
<body>
<div id="root">
<div>{{message}}</div>
</div>
</body>
<script>
// 生命周期函数:在某一时刻会自动执行的函数
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
// 在实例生成之前会自动执行的函数
beforeCreate() {
console.log('beforeCreate')
},
// 在实例生成之后会自动执行的函数
created() {
console.log('created')
},
// 在组件内容被渲染到页面之前自动执行的函数
beforeMount() {
console.log(document.getElementById('root').innerHTML, 'beforeMount')
},
// 在组件内容被渲染到页面之后自动执行的函数
mounted() {
console.log(document.getElementById('root').innerHTML, 'mounted')
},
// 当数据发生变化时会立即自动执行的函数
beforeUpdate() {
console.log(document.getElementById('root').innerHTML, 'beforeUpdate');
},
// 当数据发生变化,页面重新渲染后,会自动执行的函数
updated() {
console.log(document.getElementById('root').innerHTML, 'updated');
},
// 当 Vue 应用失效是,自动执行的函数
beforeUnmount() {
console.log(document.getElementById('root').innerHTML, 'beforeUnmount');
},
// 当 Vue 应用失效时,且 dom 完全销毁之后,自动执行的函数
unmounted() {
console.log(document.getElementById('root').innerHTML, 'unmounted');
},
});
const vm = app.mount('#root');
</script>
七、vue指令
参考:https://www.jianshu.com/p/c4a87e1b4ef7
八、数据、方法、计算属性、侦听器
<script>
// data & methods & computed & watcher
// computed 和 method 都能实现的一个功能,建议使用 computed,因为有缓存
// computed 和 watcher 都能实现的功能,建议使用 computed 因为更加简洁
const app = Vue.createApp({
data() {
return {
message: "hello world",
count: 2,
price: 5,
newTotal: 10,
}
},
watch: {
// price 发生变化时,函数会执行
price(current, prev) {
this.newTotal = current * this.count;
}
},
computed: {
// 当计算属性依赖的内容发生变更时,才会重新执行计算
total() {
return Date.now() + this.count;
// return this.count * this.price
}
},
methods: {
formatString(string) {
return string.toUpperCase();
},
// 只要页面重新渲染,才会重新计算
getTotal() {
return Date.now();
// return this.count * this.price;
},
},
template: `
<div> {{message}} {{newTotal}} </div>
`
});
const vm = app.mount('#root');
</script>
九、样式绑定语法
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
classString: 'red',
classObject: { red: false, green: true },
classArray: ['red', 'green', {brown: false}],
styleString: 'color: yellow;background: orange',
styleObject: {
color: 'orange',
background: 'yellow'
}
}
},
template: `
<div :style="styleObject">
Hello World
</div>
`
});
app.component('demo', {
template: `
<div :class="$attrs.class">one</div>
<div :class="$attrs.class">two</div>
`
})
const vm = app.mount('#root');
</script>
十、条件渲染
<script>
const app = Vue.createApp({
data() {
return {
show: false,
conditionOne: false,
conditionTwo: true
}
},
template: `
<div v-if="show">Hello World</div>
<div v-if="conditionOne">if</div>
<div v-else-if="conditionTwo">elseif</div>
<div v-else>else</div>
<div v-show="show">Bye World</div>
`
});
const vm = app.mount('#root');
</script>
十一、列表循坏渲染
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['dell', 'lee', 'teacher'],
listObject: {
firstName: 'dell',
lastName: 'lee',
job: 'teacher'
}
}
},
methods: {
handleAddBtnClick() {
// 1. 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
// this.listArray.push('hello');
// this.listArray.pop();
// this.listArray.shift();
// this.listArray.unshift('hello');
// this.listArray.reverse();
// 2. 直接替换数组
// this.listArray = ['bye', 'world']
// this.listArray = ['bye', 'wolrd'].filter(item => item === 'bye');
// 3. 直接更新数组的内容
// this.listArray[1] = 'hello'
// 直接添加对象的内容,也可以自动的展示出来
// this.listObject.age = 100;
// this.listObject.sex = 'male';
}
},
template: `
<div>
<template
v-for="(value, key, index) in listObject"
:key="index"
>
<div v-if="key !== 'lastName'">
{{value}} -- {{key}}
</div>
</template>
<div v-for="item in 10">{{item}}</div>
<button @click="handleAddBtnClick">新增</button>
</div>
`
});
const vm = app.mount('#root');
</script>
十二、事件绑定
<script>
// event, $event
// 事件修饰符:stop, prevent, capture, self, once, passive
// 按键修饰符:enter, tab, delete, esc, up, down, left, right
// 鼠标修饰符:left, right, middle
// 精确修饰符:exact
const app = Vue.createApp({
methods: {
handleClick() {
console.log('click')
},
},
template: `
<div>
<div @click.ctrl.exact="handleClick">123</div>
</div>
`
});
const vm = app.mount('#root');
</script>
十三、表单中双向绑定指令的使用
<script>
// input, textarea, checkbox, radio, select
// 修饰符 lazy, number, trim
const app = Vue.createApp({
data() {
return {
message: 'hello',
}
},
template: `
<div>
{{message}}
<input v-model.trim="message" />
//<input type="radio" v-model="message" value="jack" />
</div>
`
});
const vm = app.mount('#root');
</script>