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

置顶 champion564

已于 2022-05-24 09:25:00 修改

阅读量3.6k

点赞数 3

分类专栏：前端文章标签： visual studio code vue.js 前端前端框架

于 2022-04-15 11:16:54 首次发布

本文链接：https://blog.csdn.net/champion564/article/details/124190399

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue.js+Vue.router

知识总结

Vue.js+Vue.router

前言：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:'<span style="color: red">这里会显示红色！</span>'
  }
}
Vue.createApp(app).mount('#app')

//3
//<div><span v-bind='class1 '></span></div>
参数在指令后用冒号声明
<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 是一个指令，所以必须将它添加到一个元素上。
//如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
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
//<p v-for :'value'> {{site.text}} </p>
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
//<p v-for :'value'> {{site.text}} </p>
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
//<p v-for :'value'> {{site.text}} </p>
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: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')

//2 局部组件
<div id="app">
    <runoob-a></runoob-a>
</div>
<script>
 
var runoobA = {
  template: '<h1>自定义组件!</h1>'
}
 
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: `<h1>{{title}}</h1>`
})
 
app.mount('#app')

//4  动态绑定父组件数据，当父改变子也改变
<div id="app">
    //<sites>{{title}} </sites>
    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: `<h1>{{id}}-{{title}}</h1>`
})
 
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('<br>');
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路由

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

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

**<router-link>**属性：to 、event、replace 、apprend tag


<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` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
//1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 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选项合并
<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项目

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

champion564

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue3.0入门级教程/总结/一小时速成【含代码、文档、资源】

Vue.js个人知识总结Vue.js一级目录二级目录三级目录1.1模板语法1.2、条件语句1.3循环语句2.1组件component3.1计算属性 3.2监听属性4.1样式绑定5.1事件处理6.1表单7.18.1路由9.1mixins10.1axios一级目录二级目录三级目录1.1模板语法插值 : 1文本 2 html (使用v-html指令操作html内容) 3属性** v-bind** 操作html属性 4 v-on监听事件 5** v-if** 条件语句 6** v-for **循
复制链接

扫一扫