速通 【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>

条件和循环

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值