Vue

什么是Vue？
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网：https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模块。基于框架进行开发，更加快捷，更加高效。

Vue快速入门

• 新建HTML页面，引入Vue.js文件
  <script src="js/vue.js"></script>
• 在JS代码区域，创建Vue核心对象，定义数据模型

点击查看代码

<script>
 new Vue({
        el:"#app",
        data:{
             message:"Hello Vue!"
          }
      })
</script>

• 编写视图

点击查看代码

<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>

插值表达式

• 形式：{{表达式}}。
• 内容可以是：
  • 变量
  • 三元运算符
  • 函数调用
  • 算数运算

Vue常用指令

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

• 常用指令：
  

• v-bind
  <a v-bind:href="url">传智教育</a>
<a :href="url">传智教育</a>

• v-model
  <input type="text" v-model="url">

点击查看代码

<script>
  new Vue({
    el:"#app",
    data: {
       url: "https://www.itcast.cn"
    }
  })
</script>

• 通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

• v-on 为HTML标签绑定事件
  <input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

点击查看代码

<script>
    new Vue({
        el: "#app",
        data: {
          //...
        },
        methods: {
             handle:function(){
                  alert("我被点击了");
             }
        },
    })
</script>

• v-if

点击查看代码

年龄{{age}}，经判定为：
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

• v-show

点击查看代码

年龄{{age}},经判定为：
<span v-show="age <= 35">年轻人</span>

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

点击查看代码

data: {
   addrs: ['北京','上海','广州','深圳','成都','杭州']
},

案例

Vue生命周期

• 生命周期：指一个对象从创建到销毁的整个过程。
• 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子方法）。
  

点击查看代码

<script>
    new Vue({
          el: "#app",
          data: {

          },
          mounted() {
              console.log("Vue挂载完毕，发送请求获取数据");
          },
          methods: {
          
          },
    })
</script>

• mounted: 挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）