vue guide

最新推荐文章于 2024-06-12 11:13:48 发布

Alexmaodali

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量685

点赞数 17

文章标签：前端 vue vue.js javascript css 前端框架

本文链接：https://blog.csdn.net/2201_76122602/article/details/137406368

版权

Vue

MVVM:

model
view
view model

1.v-on

绑定函数（methods）里的

v-on:evert=“event”

简写：@event

html:

2.v-bind

:
v-bind:“event”

3.v-model

双向绑定

v-model=“xxx”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1.1 插入数据 -->
      <p>{{ title }}</p>
      <p>{{ content }}</p>
      <!-- 1.2 methods -->
      <!-- <p>{{ output() }}</p>
        <p>{{ outputInComputed }}</p> -->
      <p v-text="v_text"></p>
      <p v-html="v_html"></p>
      <p v-for="(item, key, index) in obj">{{ item }}{{ key }}{{ index }}</p>
      <p v-if="boolean">hello</p>
      <p v-show="boolean">hello</p>
      <button @click="output">ddd</button>
      <!-- 双向绑定 -->
      <input type="text" v-model="ip" />
      <p v-text="ip"></p>
      <input type="text" v-model.trim="ip" />
    </div>
    <script src="../pluginsVue/vue.js"></script>
    <script>
      // 1.
      let value = "ddddd";
      // document.getElementById("box").textContent=value;
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            title: "title",
            content: "content",
            //1. v-text,v-html--->能覆盖原有内容
            v_text: "<b>v_text:</b>d",
            v_html: "<b>v_html:</b>d",
            obj: { a: 11, b: 33, c: "33" },
            // 2.v-if , v-show---->隐藏元素，条件判断
            boolean: true,
            // 3.属性指定：v-bind:      :
            // 4.事件指令@click/v-on
            // 5.表单指令：v-model;
            ip: "placeholder",
            // 6.修饰符:跟在指令后边的
            // e.g:v-model.trim
          };
        },
        methods: {
          output() {
            console.log("in method");
            return "title:" + this.title + " content:" + this.content;
          },
        },
        //2. 计算属性：具有缓存性
        computed: {
          outputInComputed() {
            console.log("in computed");
            return "title:" + this.title + " content:" + this.content;
          },
        },
        // 3.Listener
        watch: {
          title(newValue, oldValue) {
            console.log(
              "newValueOfTitle:" + newValue,
              "oldValueOfTitle:" + oldValue
            );
          },
        },
      });
    </script>
  </body>
</html>

Vue

1. Vue 组件

<script src="../pluginsVue/vue.js"></script>
<script>
  Vue.component(
    "componentName",
   {
    template:'<img src="xxx" />'
   }
   )
  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    components: {
    'md':{
        tempalte: "{{msg}}",
        data:{
            return : {
                msg:'xxx';
            }
        }
    }
    },
  });
</script>

<template></template>
<script></script>
<style></style>

2.Vue Router->路由

like urlpath ; a reflection of html

vue2_self_learn@ E:\WorkingHere\Vue\vue2_self_learn
├── vue-router@3.5.3
└── vue@2.6.14

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <!-- <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/vue-router@3"></script> -->
  </head>

  <body>
    <div id="app">
      <router-link to="/TopList">TopList</router-link>
      <router-link to="/SongList">SongList</router-link>
      <router-view></router-view>
    </div>

    <script>
      // let toplist = new Vue.component("toplist", {
      //   template: '<h1>dddd</h1>'
      // });
      const TopList = { template: "<h1>dddd</h1>" };
      const SongList = { template: "<p>song list is here !</p>" };
      let routes = [
        { path: "/TopList", component: TopList },
        { path: "/SongList", component: SongList },
      ];

      let router = new VueRouter({
        routes,
      });

      const v = new Vue({
        el: "#app",
        data: {},
        router,
      });
    </script>
  </body>
</html>

Alexmaodali

关注

17
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue guide

/ 2.v-if , v-show---->隐藏元素，条件判断。//1. v-text,v-html--->能覆盖原有内容。// 4.事件指令@click/v-on。// 5.表单指令：v-model;// 6.修饰符:跟在指令后边的。绑定函数（methods）里的。//2. 计算属性：具有缓存性。
复制链接

扫一扫