[前端]Vue学习笔记

Vue

• 前端框架，免除原生JavaScript的DOM操作，简化书写

• 基于MVVM（层 - 视图 - 视图层） 思想

  • 实现数据双向绑定

• MVC 的话

  • 只能是是实现模型到视图的单项展示

快速入门

• 新建 html 界面，引入 vue.js文件
• 在JS代码区域，创建 Vue 核心对象,进行数据绑定
• 编写视图

代码 frist_learn1.html

常用指令

• v-bind

为HTML标签绑定属性值，如设置href,css样式等
[ 不能乱绑定只能绑在a标签里面 ]

• v-model

在表单元素上创建双向数据绑定,将标签和数据绑定在一起

second_learn.html👆

• v-on

绑定一个事件

• 可绑定的事件
  • click
  • blur
  • … 请查找🙏js,dom触发事件

<input type="button" value="button" v-on:click="test()">

-----------简化形式

<input type="button" value="button" @click="test()">

---

new Vue({
  el: "#app",
  methods:{
    test(){
       alert("Hello World");
    }
  }
})

second_learn_vue_on.html

• v-if
• v-else
• v-else-if

v-if系列指令👆

  <div v-if="cnt==3">div</div>
  <div v-else-if="cnt==2">div2</div>
  <div v-else>div3</div>

• v-show

v-show 条件性渲染元素与v-if系列的区别是他切换的是 display的值

second_learn_vue__v-if_else.html

核心部分代码：

    <div id="app">
       <input type="input"  v-model ="cnt"/>{{cnt}}
       <div v-if="cnt==1"> 等于1了哈哈</div>
      <div v-else-if="cnt==2">等于2了🚒</div>
       <div v-else>既不等于1又不等于2</div>
       <div v-show="cnt==3">我就静静看着大佬装x</div>
   </div>
   <script src="vue.js"></script>

 <script>
       new Vue({
           el:"#app",
           data(){
               return {
                   cnt:1
               }
           }
       })
   </script>

• v-for

列表渲染，遍历容器的元素或者对象的属性

遍历元素

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

附带索引遍历

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

second_learn_vue_v-for.html

Vue生命周期

• https://cn.vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks
• 每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
  • beforeCreate 创建前
  • created 创建后
  • beforeMount 载入前
  • mounted 挂载完成
    • Vue初始化成功，HTML页面渲染成功，可以和后端PY交易了
  • beforeUPdate 更新前
  • updated 更新后
  • beforeDestroy 销毁前
  • destroyed 销毁后

使用方法:

 new Vue({
   el:"#app"，
   事件名称(){
     ....
   } 
 })

thrid_learn.html