vue3:1、绑定事件 2、组件 3、路由

发布于：2022-05-15 13:47:00  栏目：技术文档

1.绑定事件

<!-- 1.v-model数据双向绑定 -->
  <input type="text" v-model="number" />
  <span>{{ number }}</span> 
  <!-- 2.v-once只渲染一次 -->
  <!-- <input type="text" v-model="number" /> -->
  <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>

2.组件components

//import引入组件
import TwoCom from "./components/TwoCom.vue";
export default {
  name: "App",
  //组件加入
  components: {
    OneCom,
    TwoCom,
  },
  //父传子数据
  父在标签给属性值
  在子组件props接收值
  //子传父使用$emit关键字传给父

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属性写连接

相关推荐