速通【vue3基础大全】

千帆过尽@

已于 2022-02-07 16:29:00 修改

阅读量668

点赞数

分类专栏：前端文章标签： javascript vue.js 前端

于 2022-02-07 16:26:55 首次发布

本文链接：https://blog.csdn.net/qq_43886548/article/details/122806453

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue3基础大全

在这里插入图片描述

创建vue应用实例

const app = Vue.createApp({
//实例里的选项
  data() {
    return { count: 4 }
  }
})
//挂载到HTML dom 对象上 一般放在最后面
const vm = app.mount('#app')

插入响应的值

<span :id="ddc" :class="{'demo': use}">Message: {{ msg }}</span>

条件和循环

  <template v-if="show">
  <li v-for="(item ,id) in items">666+{{id}}---{{item}}</li>

注册局部组件

<script>
 const buttonC = {
        data() {
            return {
                count: 0,
            }
        },
        template: `
            <button @click="count++">点了{{count}} 次</button>`

    }
    const app = Vue.createApp({
//实例里的选项
  data() {
    return { count: 4 }
  }
//局部组件
        components: {
        /两个组件
           'my-component-a': myComponentA,
            'button-counter': buttonC
        },
})

调用组件在这里插入代码片

   <button-counter></button-counter>

父子组件传值

定义另一个组件

 const myComponentA = {
       
        //传值别忘了，这两个值是父组件，也就是挂载的根组件，以这个组件的 自定义属性传入的
        props: ['title', 'name'],
        template: `<h2>我的第一个组件666 + prop的数据 {{title}}+{{name}}</h2>
        <footer>完蛋了</footer>
        不要怕变红  多个根元素就加样式类了
        <footer :class="$attrs.class">不要怕</footer>`

    }

HTML中

绑定的两个自定义属性

<my-component-a class="believe_in_youself"
                        v-for="(value,name) in items"
                        
                        :title="value"
                        :name="name">

        </my-component-a>

prop验证

 const myComponentA = {
        //这样传值有点分不清父子关系  //本身就是一个根组件
        // props: ['title', 'name'],
        // //验证，警告
        // 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
        //         }
        //     }
        // },
        //传值别忘了
        props: ['title', 'name'],
        template: `<h2>我的第一个组件666 + prop的数据 {{title}}+{{name}}</h2>
        <footer>完蛋了</footer>
        不要怕变红  多个根元素就加样式类了
        <footer :class="$attrs.class">不要怕</footer>`

    }

计算属性

需要一个函数返回作为getter

computed: {
            card: {
                get: function () {
                    return "babala";
                },
                set: function () {
                    this.msg = "babiq";
                }
            }

监听属性

watch: {
            watched: function (val) {
                this.watched = val;

                this.changed = val;
            },


            changed: function (val) {
                this.changed = val;
                this.watched = val;
            },
            }

html
v=model 双向绑定

 <input type="text" v-model="watched">
        <input type="text" v-model="changed">

组件样式绑定

HTML中第一行绑定给组件

  <my-component-a class="believe_in_youself"
                        v-for="(value,name) in items"
                        :title="value"
                        :name="name">

        </my-component-a>

组件有多个根元素就不会渲染样式，要在定义组件模板的时候用$attrs.class进行指定

template: `<h2>我的第一个组件666 + prop的数据 {{title}}+{{name}}</h2>
        <footer>完蛋了</footer>
        不要怕变红  多个根元素就加样式类了
        <footer :class="$attrs.class">不要怕</footer>`

事件处理

v-bind 缩写 @

 <button @click="clickEvent($event)">点了</button>
在方法选项中定义方法
  methods:
            {
               
                clickEvent(event){
                    alert(event.target.tagName);
                    console.log(event);
                    console.log(event.target)
                }
            },
 事件修饰符
<!-- 阻止单击事件冒泡 -->
<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>

给组件添加点击事件
native 修饰符可以解决这个问题
至于.native修饰符它的作用就是监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。
//

子组件调用父组件的方法

方法一

<script >

    const app = Vue.createApp({
        methods: {
            sayHi() {
                console.log('Hi! 父组件方法')
            }
        }
    })

    app.component('welcome-button', {
    //自定义事件，调用
        emits: ['welcome'],
        template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
     <section><p>srdfsdsdf</p></section>
  `
    })

    app.mount('#emit-example-simple')

</script>

//html

  <div id="emit-example-simple">
        <welcome-button v-on:welcome="sayHi"></welcome-button>
    </div>

如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。

表单

v-model 会根据控件类型自动选取正确的方法来更新元素。

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为属性并将 change 作为事件。

自定义指令


<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>

路由

练习的源码

使用绑定之后 to 可以指定表达式

 <div>
            <!--        路由来了   矢量操纵-->
            <p>
                <!--使用 router-link 组件进行导航 -->
                <!--通过传递 `to` 来指定链接 -->
                <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
                <router-link to="/">Go to Home</router-link>
                <router-link to="/count">Go to About</router-link>
                <router-link :to="{ path: '/home' }">Go to About</router-link>
                <!-- 命名的路由 -->
                <!--                <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>-->

                <!-- 带查询参数，下面的结果为 /register?plan=private -->
                <!--                <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>-->

                <router-link v-bind:to="{ path: '/route1'}" active-class="_active">Router Link 1</router-link>
                <router-link to='/route1' tag="span">Router Link 2</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view>


            </router-view>

要在脚本里定义一些路由关系，然后创建路由i

    // 2. 定义一些路由
    // 每个路由都需要映射到一个组件。
    // 我们后面再讨论嵌套路由。
    const routes = [
        {path: '/', component: myComponentA},
        {path: '/count', component: buttonC},
        {path: '/home', component: buttonC},
        {path: '/route1', component: myComponentA}
    ]
    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        //缩写 routes
        routes: routes
    })

最后挂载前使用路由
app.use(router)

axios 下次在总结，欢迎留言交流学习

千帆过尽@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
速通【vue3基础大全】

vue3基础大全创建vue应用实例const app = Vue.createApp({//实例里的选项 data() { return { count: 4 } }})//挂载到HTML dom 对象上一般放在最后面const vm = app.mount('#app')插入响应的值<span :id="ddc" :class="{'demo': use}">Message: {{ msg }}</span>条件和循环 <tem
复制链接

扫一扫