Vue基础语法实战

一 Vue官网

https://cn.vuejs.org/v2/guide/

二 实战代码

1 App.vue

// 模板
<template>
  <!-- id 值 app表示挂载点 -->
  <div id="app">
    <!-- 待办事项功能 -->
    <h1>待办事项功能</h1>
    <div>
      <input class="item" v-model="inputVaule" />
      <!-- 绑定事件标准写法 -->
      <button v-on:click="handleSubmit">待办事项</button>
      <!-- 绑定事件简化写法 -->
      <button @click="handleSubmit">待办事项</button>
    </div>
    <ul>
      <!-- 使用组件，通过item和index设置组件属性，将数据传递给子组件，这也是一个在组件上使用v-for的例子 -->
      <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handDelete"
      ></todo-item>
    </ul>

    <!-- 和后端通信 -->
    <h1>和后端通信</h1>
    <div>
      <button @click="handleSubmit1">提交</button>
      <input v-model="dataInput1" />
      <input v-model="list1" />
    </div>

    <!-- 数据显示 -->
    <h1>数据显示</h1>
    <!-- 第一种方式显示content  -->
    <div v-html="content"></div>
    <!-- 第二种方式显示content -->
    <div v-text="content"></div>
    <!-- 第三种方式显示content：插值表达式 -->
    <div>{{content}}</div>
    <!-- 使用 JavaScript 表达式 -->
    <div>{{ message.split('').reverse().join('') }}</div>

    <!-- 属性绑定 -->
    <h1>属性绑定</h1>
    <!-- 属性绑定通用写法 v-bind -->
    <div v-bind:title="title">属性绑定通用写法</div>
    <!-- 属性绑定简化写法 : -->
    <div :title="'echo:' + title">属性绑定简化写法</div>

    <h1>双向绑定和单向绑定</h1>
    <!-- 
    双向绑定（v-model）：数据和页面显示相互绑定
    单向绑定(value)：数据决定页面的显示，但页面决定不了数据的显示-->
    <input v-model="content1" />
    <!-- 双向绑定 -->
    <p>{{content1}}</p>
    <!-- 单向绑定 -->
    <input :value="content2" />
    <p>{{content2}}</p>

    <!-- 计算属性和监听属性 -->
    <h1>计算属性和监听属性</h1>
    <div>
      姓：
      <input v-model="firstname" />
    </div>
    <div>
      名：
      <input v-model="lastname" />
    </div>
    <div>{{fullname}}</div>
    <div>{{count}}</div>

    <!-- 条件渲染 -->
    <!-- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
    因此，如果需要非常频繁地切换，则使用 v-show 较好；
    如果在运行时条件很少改变，则使用 v-if 较好。-->
    <h1>条件渲染</h1>
    <!-- v-if是移除组件 -->
    <div v-if="show">移除dom组件</div>
    <!-- v-show是隐藏组件，推荐用v-show，可以提高性能 -->
    <div v-show="show">通过css隐藏dom组件</div>
    <button @click="hanleClick">toggle</button>

    <!-- v-if 和v-else组合用法 -->
    <div v-if="awesome">Vue is awesome!</div>
    <div v-else>Oh no 😢</div>

    <!-- 在 <template> 元素上使用 v-if 条件渲染分组F -->
    <template v-if="ok">
      <h5>Title</h5>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>

    <!-- v-else-if用法 -->
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>

    <!-- 不用 key 管理可复用的元素 -->
    logginType:
    <input v-model="loginType" />
    <br />
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" />
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" />
    </template>
    <!-- 用 key 管理可复用的元素 -->
    <br />
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input" />
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input" />
    </template>

    <!-- 列表循环，v-for的使用 -->
    <h1>列表循环，v-for的使用</h1>
    <ul>
      <!-- 数据循环展示用v-for，注意:循环中key不能重复，可以提示渲染性能 -->
      <li v-for="(item,idx) of list3" :key="idx">item{{idx}}:{{item}}</li>
    </ul>
    <ul id="example-1">
      <li v-for="item in items" :key="item.message">{{ item.message }}</li>
    </ul>

    <!-- 在 v-for 里使用对象,用 v-for 来遍历一个对象的 property -->
    <!-- 三个参数分别为键值，键名，索引 -->
    <ul id="v-for-object" class="demo">
      <div v-for="(value, name, index) in object" :key="index">{{ index }}. {{ name }}: {{ value }}</div>
    </ul>

    <!-- 显示过滤/排序后的结果 -->
    <li v-for="n in evenNumbers" :key="n">{{ n }}</li>

    <!-- 嵌套 v-for 循环 -->
    <ul v-for="(set,index) in sets" :key="index">
      <li v-for="(n,index1) in even(set)" :key="index1">{{ n }}</li>
    </ul>
    <!-- 在 v-for 里使用值范围 -->
    <div>
      <span v-for="n in 10" :key="n">{{ n }}</span>
    </div>
    <!-- 在 <template> 上使用 v-for -->
    <ul>
      <template v-for="item in items1">{{ item }}</template>
    </ul>

    <!-- 监听事件 -->
    <h1>监听事件</h1>
    <!-- v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
    -->
    <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>
    </div>

    <div id="example-2">
      <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    <!-- 内联处理器中的方法 -->
    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    <!-- 在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
    -->
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
    <!-- 阻止单击事件继续传播 -->
    <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>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat"></div>

    <!-- 表单输入绑定 -->
    <h1>表单输入绑定</h1>
    <!-- 文本 -->
    <input v-model="message3" placeholder="edit me" />
    <p>Message is: {{ message3 }}</p>

    <!-- 多行文本 -->
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message4 }}</p>
    <br />
    <textarea v-model="message4" placeholder="add multiple lines"></textarea>
    <br />
    <!-- 复选框 -->
    <!-- 单个复选框，绑定到布尔值 -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
    <!-- 多个复选框，绑定到同一个数组 -->
    <div id="example-3">
      <input type="checkbox" id="jack1" value="Jack" v-model="checkedNames" />
      <label for="jack1">Jack</label>
      <input type="checkbox" id="john1" value="John" v-model="checkedNames" />
      <label for="john1">John</label>
      <input type="checkbox" id="mike1" value="Mike" v-model="checkedNames" />
      <label for="mike1">Mike</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    <!-- 单选按钮 -->
    <div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <br />
      <span>Picked: {{ picked }}</span>
    </div>
    <!-- 选择框 -->
    <!-- 单选 -->
    <div id="example-5">
      <select v-model="selected">
        <option disabled value>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <!-- 多选时，绑定到一个数组 -->
    <div id="example-6">
      <select v-model="selected1" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br />
      <span>Selected: {{ selected1 }}</span>
    </div>
    <!-- 用 v-for 渲染的动态选项 -->
    <br />
    <select v-model="selected2">
      <option
        v-for="(option,index) in options"
        :key="index"
        v-bind:value="option.value"
      >{{ option.text }}</option>
    </select>
    <span>Selected: {{ selected2 }}</span>
    <!-- 值绑定 -->
    <!-- 当选中时，`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a" />

    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle" />

    <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
    <select v-model="selected">
      <option value="abc">ABC</option>
    </select>
  </div>
</template>

// 脚本
<script>
import TodoItem from "./components/TodoItem";
import axios from "axios";
export default {
  // 注册子组件组件
  components: {
    // 用todo-item标签去使用TodoItem这个组件
    "todo-item": TodoItem
  },
  // 数据部分
  data() {
    return {
      inputVaule: "",
      list: [],
      message: "how are you",
      content: "<h1>hello</h1>",
      title: "this is a title",
      content1: "this is content1:双向绑定",
      content2: "this is content:单向绑定",
      firstname: "",
      lastname: "",
      count: 0,
      show: true,
      list1: ["green", "yellow", "red"],
      dataInput1: "",
      list2: [],
      awesome: false,
      ok: true,
      type: "d",
      loginType: "",
      items: [{ message: "Foo" }, { message: "Bar" }],
      list3: [1, 2, 3],
      object: {
        title: "How to do lists in Vue",
        author: "Jane Doe",
        publishedAt: "2016-04-10"
      },
      numbers: [1, 2, 3, 4, 5],
      sets: [
        [1, 2, 3, 4, 5],
        [6, 7, 8, 9, 10]
      ],
      items1: ["item", "item1"],
      counter: 0,
      name: "how are you",
      message3: "",
      message4: "",
      checked: true,
      checkedNames: [],
      picked: "",
      selected: "",
      selected1: [],
      selected2: "A",
      options: [
        { text: "One", value: "A" },
        { text: "Two", value: "B" },
        { text: "Three", value: "C" }
      ]
    };
  },
  // 声明周期钩子以属性的方式进行声明
  // 在实例初始化只有，数据观测（data obserber）和event/watcher时间配置之前被调用
  beforeCreate: function() {
    console.log("beforeCreate钩子");
  },
  //  在实例创建完成后被立即调用
  // 这一步，实例已经完成以下的配置：数据观察（data obserber）,属性和方法的运算，watch/event事件回调
  // 然而挂载阶段还没开始
  created: function() {
    // `this` 指向 vm 实例
    console.log("create 钩子变化");
  },
  // 在挂载开始之前被调用，相关的渲染函数首次被调用
  beforeMount: function() {
    console.log("beforeMount 钩子");
  },
  // e1 被新创建的vm.$e1替换，挂载成功
  mounted: function() {
    console.log("mounted 钩子");
  },
  // 数据更新时调用
  beforeUpdate: function() {
    console.log("beforeUpdate 钩子");
  },
  // 组件DOM已经更新，组件更新完毕
  updated: function() {
    console.log("updated");
  },
  // 定义方法的地方
  methods: {
    // 第一种形式的方法定义
    handleSubmit() {
      this.list.push(this.inputVaule);
      this.inputVaule = "";
    },
    handDelete(index) {
      this.list.splice(index, 1);
    },
    // 第二种形式的方法定义
    hanleClick: function() {
      this.show = !this.show;
    },
    handleSubmit1() {
      axios
        .get(
          "http://localhost:8005/diff/obj/list?pipelineId=1&productFamilyId=1&objectName=1"
        )
        // then指成功之后的回调
        .then(response => {
          console.log(response);
          console.log(response.data);
          this.dataInput1 = response.data.msg;
          this.list2 = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    even: function(numbers) {
      return numbers.filter(function(number) {
        return number % 2 === 0;
      });
    },
    greet: function(event) {
      // `this` 在方法里指向当前 Vue 实例
      alert("Hello " + this.name + "!");
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName);
      }
    },
    say: function(message) {
      alert(message);
    },
    warn: function(message, event) {
      // 现在我们可以访问原生事件对象
      if (event) {
        event.preventDefault();
      }
      alert(message);
    }
  },
  // 计算属性
  computed: {
    // 依赖属性发生变化才会重新计算，当firstname或lastname发送变化时才重新计算fullname
    // 方法中变量变化决定了计算属性的变化
    fullname: function() {
      return this.firstname + " " + this.lastname;
    },
    evenNumbers: function() {
      return this.numbers.filter(function(number) {
        return number % 2 === 0;
      });
    }
  },
  // 监听器，当某个数据发生变化，触发监听器函数执行
  // 监听变量的变化，决定了方法的执行
  watch: {
    // firstname: function(){
    //  this.count++
    // },
    // lastname: function(){
    //  this.count++
    // }
    // 监听计算属性的变化，当fullname发送变化时，触发函数执行
    fullname: function() {
      this.count++;
    }
  }
};
</script>

// 样式
<style>
</style>

2 TodoItem.vue

// 子组件
<template>
  <li class="item" @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
  methods: {
    handleDelete() {
      this.$emit("delete", this.index);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item {
  color: green;
}
</style>

三 参考

https://gitee.com/cakin24/vuedemo