Vue基础

Vue基础

一、VUE

  • 开源的基于MVC、MVVM模式的Javascript框架
  • 开源:开放源代码
  • MVC:Model(模型),View(视图),Controller(控制器)
  • MVVM: Model(模型),View(视图),VM(视图模型合体)是监听器,数组绑定 -> 双向绑定

https://note.youdao.com/yws/public/resource/69c44ce4623f3e85a39ba16979d62ba2/9137DE7859914CD1A5E54D39B6ECCF75/18AF7FBB370B44BB96E85CA7B9BEDC0D?ynotemdtimestamp=1577694843833

二、NodeJS&NPM

  • NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架(包括Jquery、Angular、Vue)
  • Idea支持nodejs需要安装插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uYW3A4HA-1579141664876)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1577694281074.png)]

1.查看node版本命令:node -v

2.查看npm版本命令:npm -v

3.升级npm版本命令:npm install npm@latest -g

NPM常用命令:

  • 初始化(相当于建了一个maven工程):npm init -y

  • 安装模块:

    • 全局安装(所有项目都能用)

      ​ npm install -g vue

    ​ npm -g root 安装路径

    • 局部安装(当前项目使用)

      ​ npm install vue或者npm i vue

  • 查看模块:

    • 查看某个模块

      ​ npm list vue

    • 列表模块

      ​ npm ls

  • 卸载模块:npm uninstall vue

  • 更新模块:npm update vue

  • 运行工程:npm run dev或者npm run test或者npm run online

  • 编译工程:npm run build

三、ECMAScript6

  • ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范,是浏览器脚本语言的规范
  • ECMAScript6是javascript用的最多语言规范

新特性:

1.申明变量

(1)let

相同点:申明变量

不同点: let是申明块级的变量(简单理解就是在某个代码块中生效,离开该代码块就没有效果了)

<script type="text/javascript">
    var a = 1;
    let b = 2;
    console.debug(a, b);
    for(let i=0;i<5;i++){
        console.debug(i);
    }
    //console.debug("i=", i);//ReferenceError: i is not defined
</script>

(2)const

相同点:申明变量

不同点: 声明常量,一旦赋值之后该值是不能被更改的

<script type="text/javascript">
    const c = 3;
    //c = 4;// invalid assignment to const `c'
    console.debug(c);
</script>
2.解构表达式

(1)数组解构

<script type="text/javascript">
    let arr = ["A", "B", "C"];
    //解构数组
    let [a, b,c] = arr;
    console.debug(a,b,c);//a,b,c和A,B,C一一对应
</script>

(2)对象解构

<script type="text/javascript">
    //解构对象:方法1
    var p = {
        name:"金木研",
        age:14,
        sex:true
    }
    function show({name,age,sex}){
        console.debug(name, age, sex);
    }
    //调用函数(把对象作为参数进行传递)
    show(p);

    //解构对象:方法2
    var {name, age, sex} = p;
    console.debug(name, age, sex);
</script>
3.箭头函数

语法:

  • 参数只有一个可以省略()
  • 函数内容只有一句代码可以省略{}
var 函数名 = (参数列表) => {函数内容}
var 函数名 = function(参数列表){
	函数内容
}
<script type="text/javascript">
    var p = {
        name:"金木研",
        age:14,
        //以前申明函数的方式
        show:function(msg){
            console.debug(this.name + "   " + this.age);
        },
        /*箭头函数this是属于当前创建环境this是一致的
          如果箭头函数外面还有函数,那箭头函数的this是和外层函数this一致,如果外层没有函数,该this就是window*/
        show2:(msg)=>{
            console.debug(p.name +"   " + p.age);
        },
        //简写
        show3(msg){
            console.debug(this.name + "   " + this.age);
        }
    }
    p.show();
    p.show2();
    p.show3();
</script>
4.Promise对象
  • 异步编程的一种解决方案
<script type="text/javascript">
    const p = new Promise((resolve, reject) =>{
        //用定时任务模拟异步
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功!num:" + num)
        } else {
            reject("失败!num:" + num)
        }
    },1000)

    // 调用promise
    p.then(function (msg) {//如果调用成功执行该function函数中的内容
        console.log(msg);
    }).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
        console.log(msg);
    })
</script>
5.模块化
  • 是一种思想

  • 把代码进行拆分,方便重复利用

  • export命令用于规定模块的对外接口

    import命令用于导入其他模块提供的功能

  • 浏览器目前不能直接解析运行ES6的导入和导出功能。除非借助于工具,把ES6 的语法进行编译降级到ES5

    比如:Babel-cli工具

四、使用Vue三步曲

  1. 引入Vue.js
  2. 准备被挂载的元素
  3. JS完成挂载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!-- 引入vue的js文件:有vue的功能支持 -->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--准备一个div,用做和vue产生关系-->
    <div id="app">
        <span style="color: pink">{{msg}}</span><br/>
        {{msg}}<br/>
        {{person}}<br/>
        {{person.name}}<br/>
        {{person.sex}}<br/>
        {{sayHello()}}<br/>
    </div>
</body>
<!--写js :让准备的div和vue产生关系-->
<script type="text/javascript">
    var vue = new Vue({
        /*el:申明挂载的视图*/
        el:"#app",
        /*准备的数据*/
        data:{
            msg:"喰种",
            person:{
                name:"金木研",
                sex:true
            },
            sayHello(){
                return "emmmm.......";
            }
        }
    });
</script>
</html>

五、Vue的重要元素

(一)Vue实例挂载el

  • el是用于完成挂载功能

  • 挂载可以使用id,class,标签

    • id挂载:el:"#id"

      class挂载:el:".class"

    • 不管使用哪些方式都只能挂载一个

    • 建议使用id进行挂载

  • 只有挂载成功的元素,才能使用vue的功能(表达式等)

<body>
    <div id="app" class="app">
        {{msg}}<!--el-->
    </div>
    <div class="app">
        {{msg}}<!--{{msg}}-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:".app",
        data:{
            msg:"el"
        }
    });
</script>

(二)Vue中的数据data

  • Vue实例的数据保存在配置属性data中
  • data自身也是一个对象
  • 获取数据有两种方式
    • 直接在js中获取/设计
    • 在表达式中来获取
  • 通过Vue实例直接访问和修改data对象中的数据会及时同步的页面上
<body>
    <div id="app">
        {{msg}}<br/>
        {{person.name}}<br/>
        {{person.age}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"喰种",
            person:{
                name:"金木研",
                age:14
            }
        }
    });
    alert(vue.person.name);/*金木研*/
    //当数据发生变化后,表达式中的数据也会同时变化
    vue.person.name = "独眼";
    alert(vue.person.name);/*独眼*/
</script>

(三)Vue中的方法methods

  • Vue实例的方法保存在配置属性methods中
  • methods自身也是一个对象
  • 调用方法的位置
    • 在js中直接调用
    • 可以用表达式调用
  • 可以直接使用this获取到data中的数据
<body>
    <div id="app">
        {{sayHello1("A")}}<br/>
        {{sayHello2()}}<br/>
    </div>
</body>
<script type="text/javascript">
    /* methods:当前vue实例中所有的方法都放在methods中*/
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"方法",
            name:"猪皮",
            sex:true
        },
        methods:{
            sayHello1(msg){
                alert(msg);
                return "emmmm.....";
            },
            sayHello2(){
                return "姓名:" + this.name + "  性别:" + this.sex;
            }
        }
    });
    console.debug(vue.sayHello1());//undefined
</script>

六、Vue表达式

  • Vue表达式写在双大括号内:{{ expression }}
  • Vue表达式把数据绑定到 HTML
  • Vue将在表达式书写的位置"输出"数据
  • Vue表达式很像JavaScript表达式:它们可以包含文字、运算符和变量

1.简单表达式

  • 在{{ }}中可以进行简单的运算
<body>
    <div id="app">
       {{num1}}+{{num2}}={{num1+num2}}<br/><!--10+3=13-->
        {{num1}}-{{num2}}={{num1-num2}}<br/><!--10-3=7-->
        {{num1}}*{{num2}}={{num1*num2}}<br/><!--10*3=30-->
        {{num1}}/{{num2}}={{num1/num2}}<br/><!--10/3=3.3333333333333335-->
        {{num1}}%{{num2}}={{num1%num2}}<br/><!--10%3=1-->
        num1+num2={{num1+num2}}<br/><!--num1+num2=13-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num1:10,
            num2:3,
        }
    });
</script>

2.三目操作符

<body>
    <div id="app">
     	<!--   vue三目运算中    表示false的值:  0 null  NaN  undefined   false  ""  
			其它值全部为true-->
        {{sex?"男":"女"}}<!--女-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            sex:0,
        }
    });
</script>

3.字符串操作

<body>
    <div id="app">
        {{str}}<br/><!--tongyao-->
        {{str.length}}<br/><!--7-->
        {{str.substring(2,5)}}<br/><!--ngy-->
        {{str.substr(1,2).toUpperCase()}}<br/><!--ON-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           str:"tongyao"
        }
    });
</script>

4.对象操作

<body>
    <div id="app">
        {{person}}<br/>
        {{person.name}}<br/>
        {{person.sex}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            person:{
                name:"金木研",
                sex:true
            }
        }
    });
</script>

5.数组操作

<body>
    <div id="app">
        {{hobbys}}<br/>
        {{hobbys[0]}}<br/>
        {{hobbys.length}}<br/>
        {{hobbys.toString()}}<br/>
        {{hobbys.join("      ")}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
			hobbys:["动漫","猫",'狗']
        }
    });
</script>

七、Vue指令

指令名称 指令作用 备注
v-html 显示与解析HTML代码
v-text 原封不动的展示
v-for 遍历与循环功能 遍历数字,字符串,对象,数组
v-bind 绑定属性 简单形式 :属性名=“值”
v-model 数据双向绑定 只支持input,select,textarea
v-if 判断 v-if/v-else-if/v-else
v-on 绑定事件 简写 @事件名=方法名()
v-show 显示与隐藏 隐藏只是样式:style=“display=none”

1.v-html与v-text

  • html会解析HTML标签(相当:innerHTML)
  • text不会解析HTML标签(相当:innerText)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idgO9j79-1579141664877)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1577704331096.png)]

<body>
    <div id="app">
        <div v-text="text">
            A
        </div>
        <div v-html="html">
            B
        </div>
    </div>
</body>
<script type="text/javascript">
    /*
    v-text:在指定的标签进行设置值,如果设置的代码有html代码,会覆盖原来内容当成一个纯文本进行展示
    类似于js中的innerText

     v-html:在指定的标签进行设置值,如果设置的代码有html代码,会覆盖原来内容被浏览器所解析
    类似于js中的innerHTML
    */
    var vue = new Vue({
        el:"#app",
        data:{
           text:"<h1>测试text</h1>",
           html:"<h2>测试html</h2>"
        }
    });
</script>

2.v-for

  • 遍历数据(数字,字符串,对象,集合)

  • 数字就是普通的循环 for(var i=1;i<=数字;i++)

  • 字符串是拿到每一个字母

  • 对象循环

    <span v-for="(v,k,i) in 对象"></span>

    • v:代表对象的属性值
    • k:代表对象的属性名
    • i:代表索引
  • 数组循环

    <span v-for="(v,i) in 数组"></span>

    • v:代表对象的属性值
    • i:代表索引

语法:

<标签 v-for="元素 in 数据源"></标签>
  数据源:   数组,
    元素:   数组中的一个元素,
    
  数据源:   对象,
    元素:   对象中的一个属性名,

<标签 v-for="(元素,索引) in 数据源"></标签>

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-75JqhRd1-1579141664878)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1577705177712.png)]

<body>
    <div id="app">
        <!--遍历数字 for(var i=1;i<=5;i++)-->
        <ul>
            <li v-for="v in num">{{v}}</li>
        </ul>

        <!--遍历字符串:拿到字符串中的每一个值-->
        <ul>
            <li v-for="v in str">{{v}}</li>
        </ul>

        <!--
            遍历对象
                (v) 如果只写一个值,只获取value的值
                (v,k) v:是value的值,k:是key(属性)
                (v,k,i) v:是value的值,k:是key(属性) ,i:索引
        -->
        <ul>
            <li v-for="(v,k,i) in person">{{k}} - {{v}} -{{i}}</li>
        </ul>

        <!--遍历数组
            (v,i) : v:当前的数据值  i:当前遍历索引
        -->
        <ul>
            <li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    /**
     * 在vue中循环迭代支持的元素:
     *      数字  字符串  对象  数组
     */
    var vue = new Vue({
        el:"#app",
        data:{
            num:5,
            str:"tong",
            person:{
                name:"金木研",
                age:14,
            },
            hobbys:["吃饭","睡觉","打豆豆"]
        }
    })
</script>

3.v-bind

  • bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
  • bind有一种简写形式 <标签 :属性名="属性值">
  • 如果直接把整个对象进行属性绑定 <标签 v-bind="对象">

语法:

<标签 v-bind:标签属性名字="表达式"></标签>

简写形式:

<标签 :标签属性名字="表达式"></标签>

	为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>

<body>
    <div id="app">
       <!-- 最原生的方式来获取图片-->
        <img src="imgs/1.jpeg" width="100">

        <!--使用v-bind的方式来取图片  方式1-->
        <img v-bind:src="src" v-bind:width="width">

        <!--使用v-bind的方式来取图片(简写方式)  方式2-->
        <img :src="src" :width="width">

        <!--使用v-bind的方式来取图片(简写方式 直接绑定对象)  方式3-->
        <img v-bind="options">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            src:"imgs/1.jpeg",
            width:200,
            options:{
                src:"imgs/1.jpeg",
                width:300,
            }
        }
    });
</script>

4.v-model

  • 主要是用于完成双向的绑定
  • 支持的标签:<input>,<select>,<textarea>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k0AUQQ5Z-1579141664879)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1577706564149.png)]

<body>
    <div id="app">

        <!--绑定到type=text的input表单元素-->
        <input type="text" v-model="username"><br/>
        {{username}}
        <hr>

        <!--绑定到type=checkbox的input表单元素-->
        爱好:
        <input type="checkbox" v-model="hobbys" value="lq">篮球
        <input type="checkbox" v-model="hobbys"  value="zq">足球
        <input type="checkbox" v-model="hobbys"  value="pq">排球<br/>
        {{hobbys}}
        <hr>

        <!--绑定到type=radio的input表单元素-->
        性别:
        <input type="radio" v-model="sex" value="1"><input type="radio" v-model="sex" value="0"><br/>
        {{sex}}
        <hr>

        <!--绑定到单选的select的元素-->
        国家:
        <select v-model="country">
            <option value="-1">-- 请选择 --</option>
            <option value="ch">中国</option>
            <option value="us">美国</option>
            <option value="jp">日本</option>
        </select>
        <br/>
        {{country}}
        <hr>

        <!--绑定到textarea的元素-->
        <textarea v-model="intro" rows="5" cols="20"></textarea><br/>
        {{intro}}

    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            username:"用户名",
            hobbys:["lq"],
            sex:1,
            country:"-1",
            intro:"我叫某某某"
        }
    });
</script>

5.v-if

  • v-if根据表达式的值的真假条件渲染元素,在切换时元素及它的数据绑定或组件 被销毁或者重建
  • v-else-if是需要赋值的,必须与v-if搭配起来使用
  • v-else是一个单独的属性是不需要赋值的,必须也v-if搭配起来使用
<body>
    <div id="app">
        <!--如果满足条件,页面会显示-->
        <span style="color: darkslateblue;" v-if="age>60&&age<=100">老年人啦</span>
        <span style="color: orangered;" v-else-if="age>30&&age<=60">中年啦</span>
        <span style="color: peru;" v-else-if="age>16&&age<=30">长大啦</span>
        <span style="color: rosybrown;" v-else-if="age>=0&&age<=16">成长阶段</span>
        <span style="color: burlywood;" v-else>非正常年龄</span>
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           age:19
        }
    });
</script>

6.v-on

  • 事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
  • 写表达式或者触发的函数
  • 调用的方法可以不加()
  • v-on有一种简写形式 <标签 @事件名=方法名>
<body>
    <div id="app">

        <!--完整写法-->
        <input type="button" v-on:click="num++" value="按钮">
        {{num}}
        <input type="button" @click="show('咻~')" value="按钮2">
        <hr/>
        <input type="button" @mouseover="over" @mouseout="out" value="移进移出">
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           num:0
        },
        methods:{
            show(msg){
                alert("emmm...."+msg);
            },
            over(){
                console.debug("移进")
            },
            out(){
                console.debug("移出")
            }
        }
    });
</script>

7.v-show

  • v-show用于展示和隐藏 <标签 v-show="true/false">
  • 当v-show的值为false时, 会在标签的css中添加 display:none
<body>
    <div id="app" >
        <div v-show="isShow">咻~</div>
        <input type="button" @click="show" value="显示和隐藏">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            show(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>
发布了40 篇原创文章 · 获赞 6 · 访问量 1363
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览