跟着文档学vue（一）

蔚落 2022-05-27 07:19 227阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Vue基础1</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <style>
      .textColor {
        color: red;
      }
      .errorClass {
        font-size: 18px;
      }
    </style>
    <body>
      
      <div id="app" :title="message">
        
        <div>{
       {message}}</div>
        
        <input v-model="message">
        <div v-if="seen">条件与循环,能看到我的条件是seen为true哦</div>
        
        <p>你想成为什么</p>
        <ul>
          <li v-for="dream in dreams">{
       {dream.text}}</li>
        </ul>
        <div>
          <button @click="reverseDream">v-on添加事件监听</button>
        </div>
        <ol>
          <todo-item v-for="dream in dreams" :dream="dream" :key="dream.id"></todo-item>
        </ol>
    
        
        
        <div v-once>{
       {message}}</div>
        
        
        
    
        
    
        
        
        <div>我是计算属性： {
       {  reversedMessage }}</div>
        <div>我是方法： {
       { reversedMessageFunc() }}</div>
        
        <div>{
       { fullName }}</div>
    
        
        <div v-bind:class="{ textColor: isActive }">isActive 的值为true的时候我是红色的</div>
        
        <div v-bind:class="classObject">我的样式由计算属性决定的</div>
        
        <div v-bind:class="[activeClass]">我是以数组形式传进来的哦</div>
        
        <div v-bind:class="[{ textColor: isActive }, errorClass]">数组语法与对象语法混用</div>
    
        
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</div>
        <div v-bind:style="styleObject">以对象形式传入v-bind:style</div>
        
        
        <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
      </div>
      
      <script>
        // day01
        // 一个组件本质上是一个拥有预定义选项的一个 Vue 实例【注：组件要定义在创建实例Vue之前】，props完成父子组件间的通信
        // 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象
        Vue.component("todo-item",{
          props: ["dream"],
          template: "<li>{
       {dream.text}}</li>"
        })
        // 声明式渲染,数据与DOM进行了关联，所有的东西都是响应式的。
        var data = {
          message: "Hello Vue!",
          seen: true,
          dreams: [
            {id: "0", text: "老师"},
            {id: "1", text: "画家"},
            {id: "2", text: "程序员"}
          ],
          firstName: "foo",
          lastName: "bar",
          // reversedMessage: '',
          isActive: true,
          error: false,
          activeClass: 'textColor',
          errorClass: 'errorClass',
          activeColor: 'blue',
          fontSize: 30,
          styleObject: {
            color: 'blue',
            // 注意驼峰式命名
            fontSize: '30px'
          }
        }
        // Object.freeze(data);    // 阻止修改现有的属性，也意味着响应系统无法再追踪变化。
        var app = new Vue({
          el: "#app",
          //  *** 只有当实例被创建时data中存在的属性才是响应式的 ***，若一开始为空或者不存在，仅设置一些初始值就可以。
          // data: {
          //   message: "Hello Vue!",
          //   seen: true,
          //   dreams: [
          //     {id: "0", text: "老师"},
          //     {id: "1", text: "画家"},
          //     {id: "2", text: "程序员"}
          //   ]
          // },
          data: data,
          methods: {
            // 此方法只关注逻辑即可，并没有触及DOM
            reverseDream: function() {
              this.dreams.reverse();
            },
            reversedMessageFunc: function () {
              return this.message.split('').reverse().join('')
            }
          },
          // day02 实例生命周期钩子
          // 创建实例前执行
          beforeCreate() {
            console.log("-- beforeCreate --", this.$el);    // undefined
            console.log("-- beforeCreate --", this.$data);  // undefined
          },
          // 实例创建完成后执行
          created() {
            console.log("-- created --", this.$el);    // undefined
            console.log("-- created --", this.$data);  // Object
          },
          // $el关联到DOM，但还没有渲染数据
          beforeMount() {
            console.log("-- beforeMount --", this.$el);    // DOM + 表达式无数据 eg: <div>{
       {message}}</div>
            console.log("-- beforeMount --", this.$data);  // Object
          },
          // 渲染数据完成
          mounted() {
            console.log("-- mounted --", this.$el);    // DOM + 表达式被渲染为数据 eg: <div>我是message的值</div>
            console.log("-- mounted --", this.$data);  // Object
          },
          // 更新之前视图并未渲染？？？为什么打印出来的$el中的HTML为修改之后的值？？？
          beforeUpdate() {
            console.log("-- beforeUpdate --", this.$el);    // DOM + 表达式被渲染为数据 eg: <div>我是更改之后的值</div>
            console.log("-- beforeUpdate --", this.$data);  // Object
          },
          // 更新完成视图已更新
          updated() {
            console.log("-- updated --", this.$el);    // DOM + 表达式被渲染为数据 eg: <div>我是更改之后的值</div>
            console.log("-- updated --", this.$data);  // Object
          },
          // 实例与视图解绑，修改实例，视图不会再响应更新
          destroyed() {
          
          },
          computed: {
            // 计算属性的 getter
            reversedMessage: function () {
              // `this` 指向 vm 实例
              return this.message.split('').reverse().join('')
            },
            classObject: function () {
              return {
                'textColor': this.isActive && !this.error
              }
            },
            fullName: {
              // getter
              get: function () {
                return this.firstName + ' ' + this.lastName
              },
              // setter
              set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
              }
            }
          }
        });
      </script>
    </body>
    </html>

源码位置： https://github.com/xchener/chenxuexue/tree/dev （适合vue小白,节约敲码时间）