绑定事件、组件、路由练习

1.绑定事件

1.常用的绑定

指令	描述
v-model	指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定
v-once	只渲染元素和组件一次
v-text	更新元素的textContent，跟插值效果一样
v-html	更新元素的innerHTML
v-pre	跳过这个元素和它的子元素的编译过程，示原始 Mustache 标签
v-bind:	动态地绑定属性

2.代码部分

<template>
    <!-- 1.v-model数据双向绑定 -->
    <input type="text" v-model="number" />
    <span>{{ number }}</span> 
    <!-- 2.v-once只渲染一次 -->
    <div>{{ number }}</div>
    <input type="text" v-model="number" />
    <div v-once>{{ number }}</div>
    <!-- 3.v-text更新元素的 `textContent` -->
    <div v-text="mingzi"></div>
    <!-- 4.`v-html` 更新元素的 `innerHTML` -->
    <div v-html="htmlcode"></div>
    <!-- 5、`v-pre` 跳过这个元素和它的子元素的编译过程，示原始 `Mustache` 标签 -->
    <div v-pre>{{ htmlcode }}</div>
    <!-- 6、`v-bind` 动态地绑定属性 语法糖 : -->
    <a :href="url" :title="mingzi">{{ mingzi }}</a>
</template>
<script>
export default {
    data() {
        return {
            number:66,
            mingzi: "欧阳克",
            htmlcode:'<h1>测试v-html</h1>'
        };
    }
};
</script>

2.组件练习

<template>
    <div>欧阳克</div>
    // 4、使用组件里的html代码，这里的标签名 跟 key 对应上
    <OneCom></OneCom>
    <one-com></one-com>
    // 5、一般组件会起驼峰命名，比如：OneCom，TwoCom。
    // 5.1、引入的后，标签可以使用2种方式：<OneCom></OneCom>、<two-com></two-com>
</template>
<script>
    //import引入组件
    import TwoCom from "./components/OneCom.vue";
    export default {
      name: "App",
      //组件加入
      components: {
        OneCom
      },
      //父传子数据 父在标签给属性值 在子组件props接收值
      //子传父使用$emit关键字传给父
</script>

3.路由练习

//在路由文件：router/index.js引入各个视图 文件
//引入vue路由，使用 createRouter, createWebHistory 方法
//还可以引入createWebHashHistory，hash模式路由
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
//定义多个页面的指向，可以直接把这里的数据，放到 router 变量里。
//path 是url路径，域名后面的路径，不要重复
//name 页面起个名字，通过名字可以找到组件，不要重名
//component 页面路径，2种引入方式，先创建2个页面
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    }
]
//展示路由使用<router-view />标签
//router-link标签跳转页面 to属性写连接
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes  // 2.3、这个就是上面的变量，数据应该是 routes:routes，es6写法省略了一个。
})
//2.2、export default 输出 router 变量，谁引用这个文件，就使用这个变量
export default router