• 【前端】Vue基础+本地应用

    目录

    一、Vue基础

    1.1Vue简介

    1.2第一个Vue程序

    1.3el:挂载点 

    1.4data:数据对象

    二、本地应用

    一、Vue基础

    1.1Vue简介

    1、JavaScript框架

    2、简化Dom操作

    3、响应式数据驱动

    1.2第一个Vue程序

    官方文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Vue基础title>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         {{message}}
    14.     div>
    15.     
    16.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    17.     <script>
    18.         var app = new Vue({
    19.             el: "#app",
    20.             data: {
    21.                 message: "Hello Vue!"
    22.             }
    23.         })
    24.     script>
    25. body>
    26.  
    27. html>

     创建Vue程序步骤：

    1. 导入开发版本的Vue.js
    2. 创建Vue实例对象，设置el属性和data属性
    3. 使用简洁的模板语法把数据渲染到页面上

    1.3el:挂载点 

    el是用来设置Vue实例挂载（管理）的元素

    Vue会管理el选项命中的元素及其内部的后代元素

    可以使用其他的选择器，但是建议使用ID选择器 

     可以使用其他的双标签，不能使用html和body

    1.4data:数据对象

    Vue中用到的数据定义在data中

    data中可以写复杂类型的数据

    渲染复杂类型数据时，遵守js的语法即可

    二、本地应用

    v-text：设置标签的文本值，无论内容是什么，只会解析为文本

    v-HTML:设置标签的innerHTML，内容中有html结构会被解析为标签

    v-on基础：为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义的data中数据

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h2 v-text="message">h2>
    14.         <h2>{{message}}呀h2>
    15.         <p v-html="content">p>
    16.         <p v-text="content">p>
    17.         <input type="button" value="v-on指令" v-on:click="doIt">
    18.         <input type="button" value="v-on指令" @click="doIt">
    19.         <input type="button" value="双击事件" @dblclick="doIt">
    20.         <h2 @click="changeMessage">{{message}}h2>
    21.     div>
    22.     
    23.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    24.     <script>
    25.         var app = new Vue({
    26.             el: "#app",
    27.             data: {
    28.                 message: "hello,Vue",
    29.                 content: "百度"
    30.             },
    31.             methods: {
    32.                 doIt: function () {
    33.                     alert('做IT');
    34.                 },
    35.                 changeMessage: function () {
    36.                     this.message += "嘿呀！"
    37.                 },
    38.             },
    39.         })
    40.     script>
    41. body>
    42.  
    43. html>

    v-show：根据表达值的真假，切换元素的显示和隐藏，原理是修改元素的display，指令后面的内容最终解析为布尔值，true显示，false隐藏

    v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

    v-bind：设置元素的属性，语法：v-bind:属性名，可直接省略v-bind

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         .active {
    11.             border: 1px solid red;
    12.         }
    13.     style>
    14.  
    15. head>
    16.  
    17. <body>
    18.     <div id="app">
    19.         <button @click="changeIsShow">切换图片状态button>
    20.         <button @click="addAge">年龄增加button>
    21.         <button @click="changeIsShow2">切换汉字状态button>
    22.         <br>
    23.         
    24.         <img v-show="isShow" src="img/afternoon.jpg" alt="">
    25.         <img v-show="age>=18" src="img/afternoon.jpg" alt="">
    26.         
    27.         <p v-if="isShow2">我是汉字p>
    28.         <h2 v-if="temperature>=35">我是汉字h2>
    29.         
    30.         <img v-bind:src="imgSrc" alt="">
    31.         <br>
    32.         <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggletActive">
    33.         <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggletActive">
    34.     div>
    35.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    36.     <script>
    37.         var app = new Vue({
    38.             el: "#app",
    39.             data: {
    40.                 isShow: false,
    41.                 isShow2: false,
    42.                 age: 17,
    43.                 temperature: 30,
    44.                 imgSrc: "img/morning.jpg",
    45.                 imgTitle: "早上好",
    46.                 isActive: false,
    47.             },
    48.             methods: {
    49.                 changeIsShow: function () {
    50.                     this.isShow = !this.isShow;
    51.                 },
    52.                 addAge: function () {
    53.                     this.age++;
    54.                 },
    55.                 changeIsShow2: function () {
    56.                     this.isShow2 = !this.isShow2;
    57.                 },
    58.                 toggletActive: function () {
    59.                     this.isActive = !this.isActive;
    60.                 }
    61.             }
    62.         })
    63.     script>
    64. body>
    65.  
    66. html>

    v-for：根据数据生成列表结构，数组经常和v-for结合使用，语法（item，index）in数据

    v-on补充：传递自定义参数，事件修饰符；事件绑定的方法写成函数调用的形式，可以传入自定义参数；定义方法是需要定义形参来接收传入的实参；事件的后面跟上.修饰符可以对事件限制

    v-model：获取和设置表单元素的值（双向数据绑定）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         
    14.         <button @click="add">添加数据button>
    15.         <button @click="remove">删除数据button>
    16.         <ul>
    17.             <li v-for="item in arr">
    18.                 名次：{{item}}
    19.             li>
    20.         ul>
    21.         <h2 v-for="it in vegtables" v-bind:title="it.name">
    22.             {{it.name}}
    23.         h2>
    24.  
    25.         
    26.         <button @click="doIt(66,'加油')">点击button>
    27.         <input type="text" @keyup.enter="sayHi">
    28.         <br>
    29.  
    30.         
    31.         <button @click="setM">修改messagebutton>
    32.         <input type="text" v-model="message" @keyup.enter="getMessage">
    33.         <h2>{{message}}h2>
    34.     div>
    35.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    36.     <script>
    37.         var app = new Vue({
    38.             el: "#app",
    39.             data: {
    40.                 message: "加油",
    41.                 arr: ["第一", "第二", "第三"],
    42.                 vegtables: [
    43.                     { name: "西红柿" },
    44.                     { name: "西红柿炒鸡蛋" }
    45.                 ]
    46.             },
    47.             methods: {
    48.                 add: function () {
    49.                     this.vegtables.push({ name: "蛋炒饭" });
    50.                 },
    51.                 remove: function () {
    52.                     this.vegtables.shift();
    53.                 },
    54.                 doIt: function (p1, p2) {
    55.                     // alert('做IT');
    56.                     alert(p1);
    57.                     alert(p2);
    58.                 },
    59.                 sayHi: function () {
    60.                     alert("你好");
    61.                 },
    62.                 getMessage: function () {
    63.                     alert(this.message);
    64.                 },
    65.                 setM: function () {
    66.                     this.message = "哈哈哈"
    67.                 }
    68.             }
    69.         })
    70.     script>
    71. body>
    72.  
    73. html>
  • 相关阅读:
    算法练习-LeetCode Hot 100 543. 二叉树的直径
    binder通信实现
    游戏 小代码
    [Ynoi2006]rsrams
    嵌入式Linux应用开发-面向对象-分层-分离及总线驱动模型
    量化：基于支持向量机的择时策略
    CCF中国开源大会，中电金信与行业共探AI技术在金融行业的应用和前景
    黑客（网络安全）技术自学30天
    Docker安装Mysql
    自增还是UUID，数据库主键的类型该如何选择?
  • 原文地址：https://blog.csdn.net/qq_45764950/article/details/127570546