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的内容比较简单可以参考我的另外一篇笔记： https://www.bilibili.com/read/cv15231285?spm_id_from=333.999.0.0）

1.1模板语法

插值 : 1文本 2 html (使用v-html指令操作html内容) 3属性** v-bind** 操作html属性 4 v-on监听事件 5** v-if** 条件语句 6** v-for **循环

用户输入：**v-model **实现双向数据绑定

//1div{{...}}
/div//2div111
/divconst new vue(){  data :{  return   rewhtml:'这里会显示红色！'  }}Vue.createApp(app).mount('#app')//3//
参数在指令后用冒号声明
.class{color:red,}//4div 
 
//缩写 
  //动态参数的缩写//修饰符 修饰符是以半角句号 . 指明的特殊后缀，//用于指出一个指令应该以特殊方式绑定。//例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：/div//5//因为 v-if 是一个指令，所以必须将它添加到一个元素上。//如果是多个元素，可以包裹在  元素上，并在上面使用 v-if。最终的渲染结果将不包含  元素。div 你看不到我哈哈 
/divconst new vue(){  data :{  return    seen:true,  }}//6div {{site.text}} 
/divconst 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 {{message}} 
/divconst new vue(){  data :{  return     message:"hhhh"  }}

1.2、条件语句

1 v-else 2 v-else-if 3 v-show

//1div 你看不到我哈哈 
 你看到我哈哈 
/divconst new vue(){  data :{  return    seen:true,  }}//2div 你看不到我哈哈 
 你看到我哈哈 
 你看到我哈哈 
/divconst new vue(){  data :{  return    optiona:'hhh'   optionb:'heihei'   optionc:'ahhh'  }}//3//v-show根据条件显示元素div 你看不到我哈哈 
/divconst 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

//1div {{site.text}} 
/divconst new vue(){  data :{  return      sites:[   //goole,edge,firefox,  { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' }     ]  }}//2div// {{site.text}} 
ul {{value}} 
/ul/divconst app = {  data() {    return {      object: { name: 'www', url: 'http://www.123.com', slogan: 'hhhhh！'      }    }  }}//3div// {{site.text}} 
ul {{key}}:{{value}} 
/ul/divconst app = {  data() {    return {      object: { name: 'www', url: 'http://www.123.com', slogan: 'hhhhh！'      }    }  }}//4div// {{site.text}} 
ul {{index}}.{{key}}:{{value}} 
/ul/divconst app = {  data() {    return {      object: { name: 'www', url: 'http://www.123.com', slogan: 'hhhhh！'      }    }  }}//6      {{ n }}
  
//7//在自定义组件上，你可以像在任何普通元素上一样使用 v-for：//然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

2.1组件component

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

//1全局组件    
 // 创建一个Vue 应用const app = Vue.createApp({}) // 定义一个名为 runoob 的新全局组件app.component('runoob', {    template: '自定义组件!
'}) app.mount('#app')//2 局部组件    
 var runoobA = {  template: '自定义组件!
'} const app = Vue.createApp({  components: {    'runoob-a': runoobA  }}) app.mount('#app')//3 prop //子组件与父组件之间的通信  子组件显示父组件传递的数据    {{title}} 
 // 创建一个Vue 应用const app = Vue.createApp({     data() { return { .... }     }}) // 定义一个名为 runoob 的新全局组件app.component('sites', {    prop：['title'],    template: `{{title}}
`}) app.mount('#app')//4  动态绑定父组件数据，当父改变子也改变    //{{title}}     v-for="site in sites"    :id="site.id"    :title="site.title"
 // 创建一个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')//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  原始字符串: {{ message }}
  计算后反转字符串: {{ reversedMessage }}
    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')//2var 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    计数器: {{ counter }}
    
    const app = {  data() {    return {      counter: 1    }  }}vm = Vue.createApp(app).mount('#app')vm.$watch('counter', function(nval, oval) {    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});

4.1样式绑定

v-bind:class 缩写为：class

v-bind:style 缩写为：style (内嵌样式)

//1.static {  width: 100px;  height: 100px;}.active {  background: green;}.text-danger {  background: red;}    
const app = {    data() { return {     activeClass: 'active',     errorClass: 'text-danger' }    }}Vue.createApp(app).mount('#app')//2    菜鸟教程
const app = {    data() { return {     activeColor: 'red',     fontSize: 30 }    }}Vue.createApp(app).mount('#app')//3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上    菜鸟教程
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    
 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')//2    
 const app = {  data() {    return {      name: 'Runoob'    }  },  methods: {     say(message){alert(message)     }    }  }}//3    
 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')//4...
...
//5 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
Do something

6.1表单

v-model 1v-model在input、text area 2 input在checkbox、radio 3 v-model在select 5值绑定 6修饰符（.lazy .number .trim）

//1  input 元素：
    input 表单消息是: {{ message }}
    //在textarea中插值不起作用，要用v-model代替    textarea 元素：
    textarea 表单消息是:
  {{ message2 }}
  
 const app = {  data() {    return {      message: '',      message2: '菜鸟教程\r\nhttps://www.runoob.com'    }  }} Vue.createApp(app).mount('#app')//2  多个复选框做成数组  单个复选框：
    {{ checked }}      多个复选框：
    Runoob    Google    taobao  
  选择的值为: {{ checkedNames }}
 //3  单选按钮radio     Runoob  
    Google  
  选中值为: {{ picked }}
 const app = {  data() {    return {      picked : 'Runoob'    }  }} Vue.createApp(app).mount('#app')//4      选择一个网站    Runoob    Google           选择的网站是: {{selected}}  
//5  ABC

7.1自定义命令

自定义指令 app.directive(‘…’,{…})

    页面载入时，input 元素自动获取焦点：
    
 //法一const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive('focus', {  // 当被绑定的元素挂载到 DOM 中时……  mounted(el) {    // 聚焦元素    el.focus()  }})app.mount('#app')//法二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路由

是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。

将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局

****属性：to 、event、replace 、apprend tag

   Hello App!
              <!--`` 将呈现一个带有正确 `href` 属性的 `` 标签-->    Go to Home    Go to About  
      
//1. 定义路由组件.// 也可以从其他文件导入const Home = { template: 'Home
' }const About = { template: 'About
' } // 2. 定义一些路由// 每个路由都需要映射到一个组件。// 我们后面再讨论嵌套路由。const routes = [  { path: '/', component: Home },  { path: '/about', component: About },] // 3. 创建路由实例并传递 `routes` 配置// 你可以在这里输入更多的配置，但我们在这里// 暂时保持简单const router = VueRouter.createRouter({  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。  history: VueRouter.createWebHashHistory(),  routes, // `routes: routes` 的缩写}) // 5. 创建并挂载根实例const app = Vue.createApp({})//确保 _use_ 路由实例使//整个应用支持路由。app.use(router) app.mount('#app') // 现在，应用已经启动了！

9.1mixins

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

// 定义混入对象const myMixin = {  created() {    this.hello()  },  methods: {    hello() {      console.log('欢迎来到混入实例-RUNOOB!')    }  }} // 定义一个应用，使用混入const app = Vue.createApp({  mixins: [myMixin]}) app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"//2选项合并
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=>{  .....})

希望以上内容对你有所帮助，有任何问题可以联系作者，想要资源文档可以联系作者。

Vue3.0入门级教程/总结/一小时速成 【含代码、文档、资源】