vue基础学习

最新推荐文章于 2023-06-07 14:59:24 发布

置顶暗影杀神

最新推荐文章于 2023-06-07 14:59:24 发布

阅读量304

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43714592/article/details/103743721

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、关于前端

1.前端的发展史（了解）

(1)html(超文本标记语言) + css(层叠样式表) +js ----> 静态页面

(2)jsp(javaee)/asp(.net)/php -->动态页面

(3)ajax–> 局部刷新异步请求

同步: (线程) 一个程序执行完之后,才能执行另外一个程序

异步: 不用等待上一个程序执行,并行执行其他内容

局部刷新: 不是整个页面去刷新,只刷新局部

怎么实现局部刷新原理: 异步操作的时候,有回调函数,通过这个回调函数来完成局部刷新

(4)jquery --> 它是js的框架 js封装出来的框架 write less do more

(5)h5(html5)

(6)nodejs(相当js的后台服务) /npm(maven) --很多很多框架

2.MVVM

MVC : model(模型) view(视图) controll(控制器)
MVVM : model view view-model -->数据的双向绑定
MVVM图

3.主流前端框架

前端框架三巨头：
Vue.js:vue.js以轻量易用著称
React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术
AngularJS:AngularJS还是曾今的老大。

4.nodejs和npm环境

4.1、nodejs的下载

官网下载地址：https://nodejs.org/en/download/

4.2、nodejs的安装

一路点击next即可
如果出来一下效果，说明安装成功。

在这里插入图片描述
顺便说明一下，这个npm是nodejs自带的。
升级npm的命令:npm install npm@latest -g

二、ES6

1.什么是ES6

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。
总之，ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。ES6就是javascript用的最多语言规范.被各个浏览器实现了.

2.ES6的语法

2.1.let与var

/!*1.let和var
* let与var相比，let是块级的，相当于局部变量，var不是块级的，相当于全局变量
* *!/

for(var i=0;i<6;i++){
    console.log(i)
}
console.log(i);
console.log("===========================================")
for(let j=0;j<6;j++){
    console.log(j);
}
console.log(j)

2.2.let与const

/!*
* 2.let与const
* const声明的是常量，一旦被声明，不能够修改
* *!/
const it=0;

2.3.解构表达式

/*
* 3.解构表达式
* 3.1数组解构
* */

let arr=[1,2,3]
let [a1,a2,a3]=arr
console.log(a1,a2,a3);

/*
* 3.2对象解构
* */

let obj={"name":"张三","age":20};
let {name,age}=obj;
console.log(name,age)

2.4.箭头函数

格式
var 函数名 = (参数列表) => {函数内容}等价于一下代码
var 函数名 = function(参数列表){
函数内容
}
如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}

/*
* 4.箭头函数
* */
var run= {
    //以前的函数写法
    run1:function () {
        console.log("他正在跑步")
    },
    //箭头函数
    run2:()=>{
        console.log("他们一起跑步")
    },
    //有参数的箭头函数
    run3:(name)=>{
        console.log("他是"+name)
    },
    //箭头函数的简写版
    run4(name){console.log(name)}
}
run.run1()
run.run2()
run.run3("小明")
run.run4("小王")

2.5.箭头函数+解构表达式

/*
* 5.解构表达式+箭头表达式
* */

var v=({name})=>console.log("它是"+name)
v({"name":"昆虫"})

2.6.Promise对象

Promise是异步编程的一种解决方案，比传统的解决方案ajax（回调函数+事件）更加合理和强大。 $.get(url,data,function(data){})
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

/*
* 6.Promise对象（了解）*/
const p = new Promise((resolve, reject) =>{
    // 这里我们用定时任务模拟异步
    setTimeout(() => {
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出错了！num:" + num)
        }
    }, 300)
}).then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})//调用方法二

/*// 调用promise方法一
p.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})*/

2.7.模块化

模块化是一种思想,这种思想在前端有多种规范常见的规范有commonJs(nodeJS),cmd/amd(可以在浏览器中使用),es6(可以在浏览器中使用).

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。es6模块()功能主要由两个命令构成：export和import。

export命令用于规定模块的对外接口，
import命令用于导入其他模块提供的功能。
导出（export）：

/*const util={
    sum(a,b){
        return a+b;
    }
}
export util;*/
//简写版
export const util={
    sum(a,b){
        return a+b;
    }
}
//导出对象
var name="Tom"
var age=20
export  {name,age}

//默认导出
export default {
    sum(a,b){
        return a+b;
    }
}

导入（import）：

/*
import util from 'export';//暂时还不能使用import
console.log(sum)*/
import {name,age} from 'export'
console.log({name,age})
import x from 'export'
console.log(x.sum(1,2))

注意：export不仅可以导出对象，还可以导出一切js变量，例如基本类型变量、函数、数组等，
如果导出的代码中，明确指出了导出的变量名，在导入时就必须正确写出变量名，否则就会出错。因此js提供了default关键字，可以省略导出的变量名，导入时任意命名一个变量名即可。

上面的代码暂时无法测试，因为浏览器目前不能直接解析运行ES6 的导入和导出功能。除非借助于工具，把ES6 的语法进行编译降级到ES5，比如Babel-cli工具。

三、Vue

1.什么是vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：https://cn.vuejs.org/

2.Vue的特性

2.1.轻量

        Vue.js库的体积非常小的，并且不依赖其他基础库。

2.2.数据绑定

      对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

2.3.指令

      内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

2.4.插件化

  Vue.js核心不包含Router(路由)、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

2.5.组件化 --component (重复利用)

  组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

3.vue与其他框架的对比

https://cn.vuejs.org/v2/guide/comparison.html#ad

四、Vue入门

1.Vue的安装

1.1.以本地js文件或cdn直接引入到页面中

Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
下载Vue文件到本地，官方提供两个版本：
https://cn.vuejs.org/v2/guide/installation.html

在这里插入图片描述

1.2.在npm方式引入vue

npm install vue
浏览器访问http://localhost:8080/views/vue入门.html
在这里插入图片描述

2.Vue初体验（hello）

<div id="app">
      {{msg}}
  </div>

  <script type="text/javascript">
      var app= new Vue({
          el:"#app",
          data:{
              msg:'hello vue'
          }
      })
   
  </script>

五、Vue实例对象

1.Vue实例挂载：el

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

 <div id="app"><!--通过id挂载-->
      {{msg}}
  </div>
  <div class="app">
      {{msg}}
  </div>
  <script type="text/javascript">
      var app= new Vue({
          el:"#app",
          data:{
              msg:'hello vue'
          }
      })
      new Vue({
          el:".app",
          data:{
              msg:'通过class挂载'
          }
      })
  </script>

2.Vue中的数据：data

Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

 <h1>{{message}}</h1>
    <h1>
        我是{{user.name}},今年{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
    </h1>
    {{user.hobby}}
</div>

<script type="text/javascript">
    //vue的数据绑定在data属性上，data本身也是一个对象
    //data里面绑定的数据可以是字符串、对象、数组
    var app = new Vue({
        el : "#app",
        data : {
            message : "vue的data",
            user : {
                name : "张三",
                age : 17,
                color : "pink",
                hobby:["踢球","听音乐"]
            }
        }
    });
</script>

3.Vue中的方法：methods

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象
有两种使用方式：一是直接在html模板标签中调用，语法格式：{{方法名字()}}
二是通过Vue对象实例调用方法，语法格式：vue对象.方法名字();

<div id="app">
    {{say("小明")}}
    {{run()}}
    {{getEmployee()}}
</div>

<script type="text/javascript">
    var app = new Vue({
        el : "#app",
        data : {
            message : "vue的data",
            user : {
                name : "张三",
                age : 17,
                color : "pink",
                hobby:["踢球","听音乐"]
            }
        },
    methods:{
        say(name){
            console.log(name);
        },
        run(){
            console.log("正在跑步")
        },
        getEmployee(){
            console.log("取得后台传来的值")
        }
    }
    });
</script>

4.Vue的生命周期

在这里插入图片描述

5.钩子函数

<div id="app">
    <h1>{{message}}</h1>
    <h1>
        我是{{user.name}},今年{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
    </h1>
    {{user.hobby}}
    <br/>
    <br/>
    <br/>
    {{say("小明")}}
    {{run()}}
    {{getEmployee()}}
</div>

<script type="text/javascript">
    //vue的数据绑定在data属性上，data本身也是一个对象
    //data里面绑定的数据可以是字符串、对象、数组
    var app = new Vue({
        el : "#app",
        data : {
            message : "vue的data",
            user : {
                name : "张三",
                age : 17,
                color : "pink",
                hobby:["踢球","听音乐"]
            }
        },
    methods:{
        say(name){
            console.log(name);
        },
        run(){
            console.log("正在跑步")
        },
        getEmployee(){
            console.log("取得后台传来的值")
        }
    },
        //钩子函数
        created(){
            //创建完之后执行
            console.log("我先执行========")
        },
        mounted(){
            //渲染完之后执行
            console.log("我后执行=====")
        }
    });
</script>

6.数据的双向绑定

<div id="myApp">
    <!--v-model="msg":双向绑定数据-->
    <!--v-on:click="clickMe"添加点击事件-->
    <input type="text" v-model="msg" v-on:change="changeVal">
    {{msg}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#myApp",
        data:{
            msg:"zs"
        },
        methods:{
            changeVal(){
                alert(this.msg);
            }
        }
    })
</script>

六、关于Vue架构的认识（了解）

Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。
Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构

6.1.MVC模式：

Model：数据模型，一些JavaScript 对象，比如 {name : “小小强”,age : 16};
View: 视图，网页中的内容，一般由HTML模板生成。
Controller : 控制器（路由），视图和模型之间的胶水。

6.2.MVVM模式：

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；
在这里插入图片描述

七、VueJs表达式

1.表达式语法

VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

2.简单表达式

<div id="app">
    <!--简单表达式  -->
    <h1>{{5+5}}</h1>
    <!-- +:运算，字符串连接 -->
    <h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    <!-- -：减法 -->
    <h1>{{"5"-"5"}}</h1><!--自动转换成对应的数字进行计算-->
    <h1>{{5*5}}</h1>
    <!-- *:乘 -->
    <h1>{{"5"*"5"}}</h1><!--自动转换成对应的数字进行计算-->
    <!-- / 除-->
    <h1>{{5/5}}</h1>
    <h1>{{5/5}}</h1>
</div>

<script type="text/javascript">
    var app = new Vue({
    //挂载到id=app元素上
        el:"#app"
  
    });
</script>

3.三目运算

<div id="app">
    {{show?"真":"假"}}
   </div>
<script type="text/javascript">
 
    var app = new Vue({
 
        el:"#app",
        data:{
            show:true,
         
        }
    });
</script>

4.字符串、对象和数组的操作


<div id="app">
    {{"这是字面值"}}<br>
    {{"这是字面值".length}}<br>
    {{msg.length}}<br>
    {{msg.substring(0,3)}}<br>
    {{msg1.substring(1,4).toUpperCase()}}<br>
    <hr>
    <!--关于对象的操作-->
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/><!--转化为json格式的字符串-->
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
    <hr>
    {{hobby}}<br/>
    {{hobby[0]}}<br/>
    {{hobby.length}}<br/>
    {{hobby.toString()}}<br/>
    {{hobby.join("=========")}}<br/>
</div>

<script type="text/javascript">
    var user = {
        name: "张三",
        age: 29,
        getAge: function () {
            return this.age
        },
        toString:function(){
            return "姓名:"+this.name+",年龄:"+this.age;
        }
    };
    var app = new Vue({
    //挂载到id=app元素上
        el:"#app",
        data:{
            show:true,
            msg:"字符串操作",
            msg1:"msggl",
            user:user,
            hobby:["打游戏","踢足球","唱歌","跳舞"]
        }
    });
</script>

八、Vue指令

1.什么是指令？

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

2.常见的指令有哪些？

v-model=“表达式” 数据双向绑定
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if(else else if)=“表达式” 判断条件
v-for=“表达式” 循环
v-on=“表达式” 注册事件

3.指令的作用

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一个标签元素上可以出现多个指令属性
指令只能够出现在Vue对象所挂载的标签范围内的标签中

4.Vue的指令

4.1.v-text指令和v-html指令

语法:v-text：<标签名 v-text=“表达式”></标签名>
v-html: <标签名 v-html=“表达式”></标签名>

作用：v-text：通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
v-html:通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

v-text注意事项:
如果值是html的值,会作为普通的文本使用。
标签中的属性值必须是data中的一个属性.

v-html注意事项:
如果值是html的值,不会作为普通的文本使用,要识别html标签。
{{表达式}} 可以插入的标签的内容中
v-text和v-html更改标签中的所有内容

    <div id="app">
        <!--如果值里面有HTML标签，v-text会把它当成普通文本使用，相当于innerText-->
        <span v-text="msg"></span><br/>
        <span v-text="user.username"></span><br/>
        <!--如果值里面有HTML标签，v-html会把它当做HTML标签使用-->
        <span v-html="msg"></span>
    </div>
  <script type="text/javascript">
      new Vue({
          el:"#app",
          data:{
              msg:"<h1>这是v-text指令</h1>",
              user:{
                  username:"蓝球"
              }
          }
      })
  </script>

4.2 v-for指令及案例

语法:
<标签 v-for=“元素 in 数据源”></标签>

数据源: 数组,
元素: 数组中的一个元素,

数据源: 对象
元素: 对象中的一个属性名

<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键

<标签 v-for="(元素,键,索引) in 对象"></标签>

作用:
基于数据源多次循环达到多次渲染当前元素.

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
    <hr>
    <!--案例之学生列表-->
    <table border="1">
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="stu in students">
            <th>{{stu.id}}</th>
            <th>{{stu.name}}</th>
            <th>{{stu.age}}</th>
            <th>{{stu.sex}}</th>
        </tr>
    </table>
</div>
  <script type="text/javascript">
      var app = new Vue({
          el: "#app",
          data: {
              hobbys : ["听音乐","看小说","打牌","打麻将"],
              student : {
                  name: "王小明",
                  age: 29,
                  sex: "男",
              },
              num : 10,
              str : "itsource",
              students: [
                  {id:1,name: "刘备", age: 29, sex: "男"},
                  {id:2,name: "貂蝉", age: 30, sex: "女"},
                  {id:3,name: "吕布", age: 31, sex: "男"}
              ]
          }
      });
  </script>

4.3.v-bind指令

将data中的数据绑定到标签上,作为标签的属性的值.

语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式:
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>

注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

  <div id="app">
            <img v-bind:src="imgsrc" width="100"/>
            <img :src="imgsrc" width="200"/><!--简写版-->
            <input v-bind="prop"/>
    </div>
  <script type="text/javascript">
      new Vue({
          el:"#app",
          data:{
              imgsrc:"image/1.jpg",
              prop:{
                  type:"text",
                  name:"username"
              }
          }
      })
  </script>

4.4.v-model指令

语法:
<标签 v-model=“表达式”></标签>

在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定

注意事项:
如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
v-model只作用于以下表单:input select textarea

  <div id="app">
        <h1>绑定到type=text的input表单元素</h1>
        姓名:<input type="text" v-model="inputValue"><br/>
        data中的值:{{inputValue}}

        <h1>绑定到type=checkbox的input表单元素</h1>
        打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
        踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
        data中的值:{{checkboxValue}}


        <h1>绑定到type=radio的input表单元素</h1>
        打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
        踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
        data中的值:{{radioValue}}

        <h1>绑定到textarea的元素</h1>
        个人简介:<textarea v-model="textareaValue"></textarea><br/>
        data中的值:{{textareaValue}}


        <h1>绑定到单选的select的元素</h1>
        技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
    </select><br/>
        data中的值:{{skills}}
    </div>
  <script type="text/javascript">
      new Vue({
          el:"#app",
          data:{
              inputValue: "初始化的值",
              checkboxValue: ["踢足球"],
              radioValue: "打篮球",
              textareaValue: "你是？？？？？",
              skills: "java",
          }
      })
  </script>

4.5.v-show指令

语法:
<标签名 v-show=“表达式”></标签名>

作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :

注意事项:
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
标签的值会自动转换为boolean类型的值

    <div id="app">
 
       <div v-show="show">能看见</div>
       <div v-show="hidden">能看见</div>
       <div v-show="score==100"> 不能看见</div>
    </div>
  <script type="text/javascript">
      new Vue({
          el:"#app",
          data:{
              "show":true,
              "hidden":true,
              "score":90,
          }
      })
  </script>

4.6.v-if指令、v-else指令、v-else-if指令

v-if指令
语法:
<标签名 v-if=“表达式”></标签名>

作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

注意事项:
当表达式中的值是false时, 是从页面上删除.
标签的值会自动转换为boolean类型的值

v-else指令
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>

作用:
当v-if表达式不成立时, v-else执行.

注意事项:
该指令必须也v-if搭配起来使用.
v-else是一个单独的属性, 该属性是不要赋值的.

v-else-if指令
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else></标签名>

<div id="app">
        <div v-if="show">能看见</div>
        <div v-if="hidden">能看见</div>
======================if else============================
        <div v-if="grade<60">不及格</div>
        <div v-else="grade>60">及格</div>
=====================if elseif else===================================
        <div v-if="grade<60">差</div>
        <div v-else-if="grade>=60 && grade<75">中</div>
        <div v-else-if="grade>=75 && grade<85">良</div>
        <div v-else="grade>=85 && grade<=100">优</div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                "show":true,
                "hidden":true,
                "grade":90,
            }
        })
    </script>

暗影杀神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础学习

一、关于前端1.前端的发展史（了解）(1)html(超文本标记语言) + css(层叠样式表) +js ----> 静态页面(2)jsp(javaee)/asp(.net)/php -->动态页面(3)ajax–> 局部刷新异步请求同步: (线程) 一个程序执行完之后,才能执行另外一个程序异步: 不用等待上一个程序执行,并行执行其他内容局部刷新: 不...
复制链接

扫一扫