day13-Vue&Element 建议看官网文档

日期：

 day13-Vue&Element 建议看官网文档

Vue

  • Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
  • <--0vue-->
    <--0vue-->

Vue快速入门（建议看官网文档）

  • <--1Vue快速入门-->
    <--1Vue快速入门-->

实例

<div id="app">
  <input v-model="username">
  <!--插值表达式-->
    {{ username }}
</div>

<script src="js/vue.js" ></script>
<script>
  //创建vue核心对象
  var app = new Vue({
    el: '#app',
    data: {
      username: 'Hello Vue!'
    }
  })

</script>

vue常用指令

  • 指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。
  • 例如: v-if，v-for..

常用指令

  • <--2vue常用指令-->
    <--2vue常用指令-->

v-bind & v-model

  • <--3bind-model-->
    <--3bind-model-->
实例（v-bind & v-model）（引入vue.js用官网版本）
<body>

<div id="app">
  <a  v-bind:href="url">来点击一下</a>
    <a :href="url">来点击一下2</a>

    <input v-model="url">

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
  //创建vue核心对象
  const app = new Vue({
    el: '#app',
    data: {
      // username: '',
      url:"https://www.baidu.com",
    }
  })

</script>

</body>

v-on

  • <--4v-on-->
    <--4v-on-->
实例（v-on）（引入vue.js用官网版本）
<body>

<div id="app">
    <input type="button" value="小按钮" v-on:click="show()">
    <input type="button" value="小按钮" @click="show()">
    
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
  //创建vue核心对象
  const app = new Vue({
    el: '#app',
    data: {
      // username: '',
      url:"https://www.baidu.com",
    },
      methods:{
        show(){
            alert("我被点了");
        }
      }
  })

</script>

</body>

v-if & v-show

  • <--5v-if-->
    <--5v-if-->
实例1（v-if & v-show）（引入vue.js用官网版本）
<body>

<div id="app">
    <div v-if="count == 3">1</div>
    <div v-else-if="count == 4">2</div>
    <div v-else>3</div>
    <hr>
    <div v-show="count == 3"> v-show</div>
    <br>
    <input v-model="count">
    
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
  //创建vue核心对象
  const app = new Vue({
    el: '#app',
    data: {
      // username: '',
      url:"https://www.baidu.com",
        count:3
    },
      methods:{
        show(){
            alert("我被点了");
        }
      }
  })

</script>

</body>

v-for

  • <--6v-for-->
    <--6v-for-->
实例2（v-for）（引入vue.js用官网版本）
<body>

<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
       {{i+1}}--{{addr}} <br>
    </div>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
  //创建vue核心对象
  const app = new Vue({
    el: '#app',
    data: {
      // username: '',
      url:"https://www.baidu.com",
        count:3,
        addrs:["xx","ss","ssssss"]
    },
      methods:{
        show(){
            alert("我被点了");
        }
      }
  })

</script>

</body>

vue生命周期

  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
  • <--7vue生命周期-->
    <--7vue生命周期-->
  • mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
  • 发送异步请求，加载数据

mounted示例

  • <--8mounted示例-->
    <--8mounted示例-->

实例（mounted）

    <script>
      //创建vue核心对象
      const app = new Vue({
        el: '#app',
        data: {
          // username: '',
          url:"https://www.baidu.com",
            count:3,
            addrs:["xx","ss","ssssss"]
        },
          methods:{
            show(){
                alert("我被点了");
            }
          },
          mounted(){
            alert("加载完成")
          }
      })

留言

張貼留言