1.绑定事件

  1. <!-- 1.v-model数据双向绑定 -->
  2.   <input type="text" v-model="number" />
  3.   <span>{{ number }}</span> 
  4.   <!-- 2.v-once只渲染一次 -->
  5.   <!-- <input type="text" v-model="number" /> -->
  6.   <div>{{ number }}</div>
  7.   <input type="text" v-model="number" />
  8.   <div v-once>{{ number }}</div>
  9.   <!-- 3.v-text更新元素的 `textContent` -->
  10.   <div v-text="mingzi"></div>
  11.   <!-- 4.`v-html` 更新元素的 `innerHTML` -->
  12.   <div v-html="htmlcode"></div>
  13.   <!-- 5、`v-pre` 跳过这个元素和它的子元素的编译过程，示原始 `Mustache` 标签 -->
  14.   <div v-pre>{{ htmlcode }}</div>
  15.   <!-- 6、`v-bind` 动态地绑定属性 语法糖 : -->
  16.   <a :href="url" :title="mingzi">{{ mingzi }}</a>

2.组件components

  1. //import引入组件
  2. import TwoCom from "./components/TwoCom.vue";
  3. export default {
  4.   name: "App",
  5.   //组件加入
  6.   components: {
  7.     OneCom,
  8.     TwoCom,
  9.   },
  10.   //父传子数据
  11.   父在标签给属性值
  12.   在子组件props接收值
  13.   //子传父使用$emit关键字传给父

3.路由

  2. 在路由文件：router/index.js引入各个视图 文件
  3. 引入vue路由，使用 createRouter, createWebHistory 方法
  4. 还可以引入createWebHashHistory，hash模式路由
  5. import { createRouter, createWebHistory } from 'vue-router'
  6. import Home from '../views/Home.vue'
  8. 定义多个页面的指向，可以直接把这里的数据，放到 router 变量里。
  9. path 是url路径，域名后面的路径，不要重复
  10. name 页面起个名字，通过名字可以找到组件，不要重名
  11. component 页面路径，2种引入方式，先创建2个页面
  12. const routes = [
  13.     {
  14.         path: '/',
  15.         name: 'Home',
  16.         component: Home
  17.     },
  18.     {
  19.         path: '/about',
  20.         name: 'About',
  21.         component: () => import('../views/About.vue')
  22.     }
  23. ]
  24. 展示路由使用<router-view />标签
  25. router-link标签跳转页面 to属性写连接