4.Vue

文章目录

  • 1.什么是Vue
  • Vue快速入门
  • Vue常用指令
  • Vue生命周期

1.什么是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", //Vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
script>
  • 编写视图
<div id="app">
        <input type="text" v-model="message">
        {{message}}
  • 完整代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门title>
    
    <script src="js/vue.js">script>
head>
<body>
    
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    div>
body>

<script>
    //第二步:定义vue对象
    new Vue({
        el: "#app", //Vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
script>
html>
  • 插值表达式
    • 形式:{{表达式}}
    • 内容可以是:
      • 变量
      • 三元运算符
      • 函数调用
      • 算术运算

Vue常用指令

  • 指令:HTML标签上带有v-前缀的特殊属性,不同指令具有不同含义

  • 常用指令:

    • v-bind:为HTML标签绑定属性值。如设置hrefcss样式等
    • v-model:在表单元素上创建双向数据绑定
    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue-指令-v-bind,v-modeltitle>
        <script src="js/vue.js" >script>
    head>
    <body>
        <div id="app">
            <a v-bind:href="url">链接1a>
            
            <a :href="url">链接2a>
    
            <input type="text" v-model="url">
        div>
    body>
    
    <script>
        new Vue({
            el: "#app",
            data:{
                url: "https:www.baidu.com"
            }
        })
    script>
    html>
    
    • v-on:为HTML标签绑定事件
    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue-指令-v-ontitle>
        <script src="js/vue.js" >script>
    head>
    <body>
        <div id="app">
            <input type="button" v-on:click="handle()" value="点我一下">
            
            <input type="button" @click="handle()" value="点我一下">
    
        div>
    body>
    
    <script>
        new Vue({
            el: "#app",
            data:{
                
            },
            methods: {
                handle: function(){
                    alert("我被点了一下");
                }
            }
        })
    script>
    html>
    
    • v-ifv-else-ifv-else:条件性的渲染某元素,判定为true时渲染,否则不渲染
    • v-show:根据条件展示某元素,区别在于切换的时display属性的值
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue-指令-v-ontitle>
        <script src="js/vue.js">script>
    head>
    
    <body>
        <div id="app">
            年龄<input type="number" v-model="age">经判定,为:
            <span v-if="age<=35">年轻人(35岁及以下)span>
            <span v-else-if="35">中年人(35-60)span>
            <span v-else>老年人(60岁及以上)span>
    
            <br><br>
    
            年龄<input type="number" v-model="age">经判定,为:
            <span v-show="age<=35">年轻人(35岁及以下)span>
            <span v-show="35">中年人(35-60)span>
            <span v-show="age>60">老年人(60岁及以上)(35-60)span>
    
    
        div>
    body>
    
    <script>
        new Vue({
            el: "#app",
            data: {
                age: 20
            },
            methods: {
    
            }
        })
    script>
    
    html>
    
    • v-for:列表渲染,遍历容器的元素或者对象的属性
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue-指令-v-fortitle>
        <script src="js/vue.js">script>
    head>
    
    <body>
        <div id="app">
            
            <div v-for="addre in addres">{{addre}}div>
    
            <hr>
            
            <div v-for="(addre, index) in addres">{{index + 1}} : {{addre}}div>
        div>
    body>
    
    <script>
        new Vue({
            el: "#app", //Vue接管区域
            data: {
                addres: ["北京", "上海", "西安", "成都", "深圳"]
            },
            methods: {
    
            }
        })
    script>
    
    html>
    
  • 注意事项:通过v-bind或者v-model绑定的变量,必须在数据模型中声明

Vue生命周期

  • 生命周期:指一个对象从创建到销毁的整个过程
  • 生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态 阶段周期
beforeCreat 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
  • 下图是Vue官网提供的从创建Vue到效果 Vue 对象的整个过程及各个阶段对应的钩子函数:

4.Vue_第1张图片

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

你可能感兴趣的:(javaweb开发,vue.js,前端)