Vue3.0入门级教程/总结/一小时速成 【含代码、文档、资源】
Vue.js+Vue.router
知识总结
- Vue.js+Vue.router
-
- 1.1模板语法
- 1.2、条件语句
- 1.3循环语句
- 2.1组件component
- 3.1计算属性
- 3.2监听属性
- 4.1样式绑定
- 5.1事件处理
- 6.1表单
- 7.1自定义命令
- 8.1路由
- 9.1mixins
- 10.1axios
前言：vue.js其实是包含了vue语法、vue-router、vue-cli这几部分的，开发真实前端项目中就是三者一起使用才能做好一个vue项目的；其中vue语法内容比较多，vue-router路由主要用于通信和导航（比如页面的切换），vue-cli用于搭建vue项目（vue-cli的内容比较简单可以参考我的另外一篇博客：
链接: 学习vue之前最好学习的技术-webpack
链接: 如何快速有效搭建vue项目
1.1模板语法
插值 : 1文本 2 html (使用v-html指令操作html内容) 3属性** v-bind** 操作html属性 4 v-on监听事件 5** v-if** 条件语句 6** v-for **循环
用户输入：**v-model **实现双向数据绑定
//1
div
<p>{{...}}</p>
/div
//2
div
<p v-html='rewhtml'>111</p>
/div
const new vue(){
data :{
return
rewhtml:'这里会显示红色！'
}
}
Vue.createApp(app).mount('#app')
//3
//
参数在指令后用冒号声明
<div><span v-bind:class="{'class1':use}"></span></div>
<style>
.class{
color:red,
}
</style>
//4
div
<p v-on:click="事件名称"> </p>
<p @click="事件名称"> </p>//缩写
<p @[event]click="事件名称"> </p> //动态参数的缩写
//修饰符 修饰符是以半角句号 . 指明的特殊后缀，
//用于指出一个指令应该以特殊方式绑定。
//例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
/div
//5
//因为 v-if 是一个指令，所以必须将它添加到一个元素上。
//如果是多个元素，可以包裹在 元素上，并在上面使用 v-if。最终的渲染结果将不包含 元素。
div
<p v-if:'seen'> 你看不到我哈哈 </p>
/div
const new vue(){
data :{
return
seen:true,
}
}
//6
div
<p v-for :'site in sites'> {{site.text}} </p>
/div
const new vue(){
data :{
return
sites:[
//goole,edge,firefox,
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
//7
//v-model 指令用来在 input、select、
//textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，
//根据表单上的值，自动更新绑定的元素的值。
//按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
div
<p > {{message}} </p>
<input v-model: 'message'></input>
/div
const new vue(){
data :{
return
message:"hhhh"
}
}
1.2、条件语句
1 v-else 2 v-else-if 3 v-show
//1
div
<p v-if:'seen'> 你看不到我哈哈 </p>
<p v-else> 你看到我哈哈 </p>
/div
const new vue(){
data :{
return
seen:true,
}
}
//2
div
<p v-if:'optiona'> 你看不到我哈哈 </p>
<p v-else:'optionb'> 你看到我哈哈 </p>
<p v-else-if:'optionc'> 你看到我哈哈 </p>
/div
const new vue(){
data :{
return
optiona:'hhh'
optionb:'heihei'
optionc:'ahhh'
}
}
//3
//v-show根据条件显示元素
div
<p v-show:'seen'> 你看不到我哈哈 </p>
/div
const new vue(){
data :{
return
seen:true,
}
}
1.3循环语句
1 v-for 需要以site in sites的形式 2 v-for 可以读取value 3 v-for 可以读取index 4v-for 可以读取key 5 循环整数 6 显示排序结果 7在自定义组件使用v-for
//1
div
<p v-for :'site in sites'> {{site.text}} </p>
/div
const new vue(){
data :{
return
sites:[
//goole,edge,firefox,
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
//2
div
// {{site.text}}
ul
<li v-for ='value in object'> {{value}} </li>
/ul
/div
const app = {
data() {
return {
object: {
name: 'www',
url: 'http://www.123.com',
slogan: 'hhhhh！'
}
}
}
}
//3
div
// {{site.text}}
ul
<li v-for ='value in object'> {{key}}:{{value}} </li>
/ul
/div
const app = {
data() {
return {
object: {
name: 'www',
url: 'http://www.123.com',
slogan: 'hhhhh！'
}
}
}
}
//4
div
// {{site.text}}
ul
<li v-for ='value in object'> {{index}}.{{key}}:{{value}} </li>
/ul
/div
const app = {
data() {
return {
object: {
name: 'www',
url: 'http://www.123.com',
slogan: 'hhhhh！'
}
}
}
}
//6
<div id="app">
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
</div>
//7
//在自定义组件上，你可以像在任何普通元素上一样使用 v-for：
<my-component v-for="item in items" :key="item.id"></my-component>
//然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：
<my-component
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
></my-component>
2.1组件component
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
一个应用需要被挂载到一个 DOM 元素中。
//1全局组件
<div id="app">
<runoob></runoob>
</div>
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 runoob 的新全局组件
app.component('runoob', {
template: '自定义组件!
'
})
app.mount('#app')
//2 局部组件
<div id="app">
<runoob-a></runoob-a>
</div>
<script>
var runoobA = {
template: '自定义组件!
'
}
const app = Vue.createApp({
components: {
'runoob-a': runoobA
}
})
app.mount('#app')
//3 prop
//子组件与父组件之间的通信 子组件显示父组件传递的数据
<div id="app">
<sites>{{title}} </sites>
</div>
<script>
// 创建一个Vue 应用
const app = Vue.createApp({
data() {
return {
....
}
}
})
// 定义一个名为 runoob 的新全局组件
app.component('sites', {
prop：['title'],
template: `{{title}}
`
})
app.mount('#app')
//4 动态绑定父组件数据，当父改变子也改变
<div id="app">
//{{title}}
v-for="site in sites"
:id="site.id"
:title="site.title"
</div>
<script>
// 创建一个Vue 应用
const Site = {
data() {
return {
sites: [
{ id: 1, title: 'Google' },
{ id: 2, title: 'Runoob' },
{ id: 3, title: 'Taobao' }
]
}
}
}
const app = Vue.createApp(Site)
// 定义一个名为 runoob 的新全局组件
app.component('site-info', {
prop：['id','title'],
template: `{{id}}-{{title}}
`
})
app.mount('#app')
</script>
//5 prop验证
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
3.1计算属性
1computed 2computed的getter setter
//1
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
const app = {
data() {
return {
message: 'RUNOOB!!'
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
//computed methods 都可以用来计算，但是methods不需要缓存
methods:{
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
//2
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);
3.2监听属性
1 watch监听事件 2 异步加载watch监听
//1
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script>
const app = {
data() {
return {
counter: 1
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
4.1样式绑定
v-bind:class 缩写为 ：class
v-bind:style 缩写为 ：style (内嵌样式)
//1
<style>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static" :class="[activeClass, errorClass]"></div>
</div>
<script>
const app = {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
}
Vue.createApp(app).mount('#app')
</script>
//2
<body>
<div id="app">
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
<script>
const app = {
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
//3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
<body>
<div id="app">
<div :style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
<script>
const app = {
data() {
return {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
}
}
5.1事件处理
v-on 1 直接绑定到一个方法上 2内联js语法 3事件处理多个方法用逗号分开 4事件符 5按键符
v-on:click 或 @click
@click.once=‘’
-
事件符
-
.stop- 阻止冒泡 -
.prevent- 阻止默认事件 -
.capture- 阻止捕获 -
.self- 只监听触发该元素的事件 -
.once- 只触发一次 -
.left- 左键事件 -
.right- 右键事件 -
.middle- 中间滚轮事件
-
-
按键符
全部的按键别名：
-
.enter -
.tab -
.delete(捕获 “删除” 和 “退格” 键) -
.esc -
.space -
.up -
.down -
.left -
.right
系统修饰键：
-
.ctrl -
.alt -
.shift -
.meta
鼠标按钮修饰符:
-
.left -
.right -
.middle
-
//1
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">点我</button>
</div>
<script>
const app = {
data() {
return {
name: 'Runoob'
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
//2
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="say('hi')">say hai</button>
</div>
const app = {
data() {
return {
name: 'Runoob'
}
},
methods: {
say(message){
alert(message)
}
}
}
}
//3
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet",@click='onsubmit'>点我</button>
</div>
<script>
const app = {
data() {
return {
name: 'Runoob'
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
//4
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
//5 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
6.1表单
v-model 1v-model在input、text area 2 input在checkbox、radio 3 v-model在select 5值绑定 6修饰符（.lazy .number .trim）
//1
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>input 表单消息是: {{ message }}</p>
//在textarea中插值不起作用，要用v-model代替
<p>textarea 元素：</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
<p>textarea 表单消息是:</p>
<p style="white-space: pre">{{ message2 }}</p>
</div>
<script>
const app = {
data() {
return {
message: '',
message2: '菜鸟教程\r\nhttps://www.runoob.com'
}
}
}
Vue.createApp(app).mount('#app')
</script>
//2 多个复选框做成数组
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
//3 单选按钮radio
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script>
const app = {
data() {
return {
picked : 'Runoob'
}
}
}
Vue.createApp(app).mount('#app')
</script>
//4
<div id="app">
<select v-model="selected" name="site">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
//5
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
7.1自定义命令
自定义指令 app.directive(‘…’,{…})
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
//法一
<script>
const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus()
}
})
app.mount('#app')
</script>
//法二
const app ={
data(){
return{
}
},
directive:{
focus:{
//指令定义
}
}
}
Vue.createApp(app).mount('#app')
-
钩子函数（指令定义函数提供了几个钩子函数）
-
created: 在绑定元素的属性或事件监听器被应用之前调用。 -
beforeMount: 指令第一次绑定到元素并且在挂载父组件之前调用。。 -
mounted: 在绑定元素的父组件被挂载后调用。。 -
beforeUpdate: 在更新包含组件的 VNode 之前调用。。 -
updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。 -
beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。 -
unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。
-
import { createApp } from 'vue'
const app = createApp({})
// 注册
app.directive('my-directive', {
// 指令是具有一组生命周期的钩子：
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 绑定元素的父组件被挂载时调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 卸载绑定元素的父组件时调用
unmounted() {}
})
// 注册 (功能指令)
app.directive('my-directive', () => {
// 这将被作为 `mounted` 和 `updated` 调用
})
// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')
app.mount('#app')
钩子函数的参数：el 、binding
el el 指令绑定到的元素。这可用于直接操作 DOM。
binding binding 是一个对象，包含以下属性：
-
instance：使用指令的组件实例。 -
value：传递给指令的值。例如，在v-my-directive="1 + 1"中，该值为2。 -
oldValue：先前的值，仅在beforeUpdate和updated中可用。值是否已更改都可用。 -
arg：参数传递给指令 (如果有)。例如在v-my-directive:foo中，arg 为"foo"。 -
modifiers：包含修饰符 (如果有) 的对象。例如在v-my-directive.foo.bar中，修饰符对象为{foo: true，bar: true}。 -
dir：一个对象，在注册指令时作为参数传递。
8.1路由
**
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`9.1mixins
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
// 定义混入对象
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('欢迎来到混入实例-RUNOOB!')
}
}
}
// 定义一个应用，使用混入
const app = Vue.createApp({
mixins: [myMixin]
})
app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"
//2选项合并
<div id = "app"></div>
<script type = "text/javascript">
const myMixin = {
data() {
return {
message: 'hello',
foo: 'runoob'
}
}
}
const app = Vue.createApp({
mixins: [myMixin],
data() {
return {
message: 'goodbye',
bar: 'def'
}
},
created() {
document.write(JSON.stringify(this.$data))
}
})
10.1axios
https://www.runoob.com/vue3/vue3-ajax-axios.html
vue-resouce在2.0版本使用较多，用来做为异步加载请求数据的技术
$.ajax（
url:'',
funtion(data){
//获取数据后进行的事件
}
}）
axios({
method:'get',
url:'',
}).then(res=>{
.....
})
链接: 学习vue之前最好学习的技术-webpack
链接: 如何快速有效搭建vue项目
希望以上内容对你有所帮助，有任何问题可以联系作者，想要资源文档可以联系作者。