vue01

最新推荐文章于 2023-01-09 16:57:27 发布

一只羊驼啊

最新推荐文章于 2023-01-09 16:57:27 发布

阅读量224

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_43684164/article/details/103772408

版权

java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.ECMAScript的认识

1.1什么是ECMAScript

ECMAScript：简单的说它就是javaScript语言的规范

1.2ECMAScript6

1.2.1ES6语法声明变量

var：声明全局变量
let：声明块级变量(相当于局部变量)
const：声明常量(不能被修改)

使用var声明时，其他地方能取到值

for (var i=1;i<=10;i++){
    console.debug(i)
}
    console.debug("var变量："+i)

使用let声明时，当前代码块外边取不到值
在这里插入图片描述

for (let j=1;j<=10;j++){
     console.debug(j)
}
     //undefined
     console.debug("let变量："+j)

使用const声明时，不能修改它的值
在这里插入图片描述

const a = 10;
a = 5;
console.debug(a)

1.2.2ES6语法解构表达式

解构数组

let arr = ["七","秀","坊"]
        //ES6取法  解构数组
        let [a,b,c] = arr
        console.debug(a,b,c)

解构对象

var p = {
            name:"万花谷",
            age:"50"
        }
        //ES6 解构对象
        function JWS(name, age) {
            console.debug(name,age)
        }
        //调用函数传参
        JWS(p);

        //ES6  解构对象用{}
        var {name,age} = p;
        console.debug(name,age)

1.2.3ES6语法箭头函数

箭头函数this是属于当前创建环境this是一致的
如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window

<script type="text/javascript">
        var Person = {
            name:"蓬莱",
            age:"20",
            fly:function (f) {
                //原始写法
                console.debug(this.name,this.age,f)
            },
            address:(f)=>{
                /*
                * 新的写法1  箭头函数this是属于当前创建环境this是一致的
                * 如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window
                * */
                console.debug(f)
            },
            run(f){
                //新写法2
                console.debug(this.name,this.age,f)
            }
        }
        Person.fly("I can fly");
        Person.address("蓬莱仙岛");
        Person.run("我要去七秀")
    </script>

二. Vue

2.1Vue是什么？

是一套用于构建用户界面的渐进式框架。
所谓的渐进式是指vue可以允许用户使用其中的一小部分，也可以一步一步的深入使用。
说的天花烂坠也没什么用，简单的说，就是可以学多少，用多少。

MVVM模式：
Vue是一款MVVM模型的双向绑定前端框架。

M：Model 模型(准备数据的)
V：View 渲染视图
VM：ViewModel 视图模型

DOM Listeners：dom监听器，主要用来监听页面的改变，页面一改变，数据就改变
Data Bindings：监听数据的，只要数据改变，页面就会改变

2.2 vue的安装

有两种方案：
1.原生导入：下载vue核心js文件，在本地引入
2.npm安装vue
我们用npm安装，首先得安装npm，我们只需要装nodejs就行了，因为它自带npm工具
3.装好nodejs后，在idea中支持nodejs，需要安装插件
在这里插入图片描述安装完成后，重启一下就好了
4.在控制中输入命令：

初始化：npm init -y
2)安装模块：npm install vue
完成后就可以了

三.vue的使用

3.1使用vue的步骤

导入js库
准备数据
准备视图
渲染视图

3.2 helloVue.html

el：

挂载指定的dom节点
支持挂载的选择器：id选择器，类选择器，标签选择器
使用id选择器，其他选择器有缺陷

data：

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

methods：

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="d1">
        {{msg}} <br>
        {{name}}<br>
        {{person}}<br>
        {{fly()}}
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#d1",
        data:{
            msg:"Welcome",
            name:"七秀",
            person:{
                name:"蔷薇",
                age:20
            }
        },
        methods:{
            fly(){
                console.debug("I can fly")
            }
        }
    })
    vue.msg = "哈哈";
</script>
</html>

3.3VueJs表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="d1">
        {{a}}+{{b}} = {{a+b}} <br>
        {{a}}-{{b}} = {{a-b}} <br>
        {{a}}*{{b}} = {{a*b}} <br>
        {{a}}/{{b}} = {{a/b}} <br>
        {{a}}%{{b}} = {{a%b}} <br>
        {{sex?"男":"女"}}
        <!--
            为false的值: null NaN 0 undefined false ""
        -->
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#d1",
        data:{
            a:5,
            b:6,
            sex:1
        }
    })

</script>
</html>

3.4Vue指令

3.4.1什么是指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

3.4.2 v-text和v-html

v-text：当做纯文本处理
v-html：如果有html代码，会进行解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="d1">
        <div v-text="strText">
            {{strText}}
        </div>

        <div v-html="strHtml">
            {{strHtml}}
        </div>
    <!--
        v-text：当做纯文本处理
        v-html：如果有html代码，会进行解析
    -->
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#d1",
        data:{
            strText:"<h1>万花</h1>",
            strHtml:"<h1 style='color: orangered'>万花</h1>"
        }
    })

</script>
</html>

3.4.3 v-for

<标签 v-for=“元素 in 数据源”></标签>
<标签 v-for="(元素,索引|键) in 数据源"></标签>
<标签 v-for="(元素,键,索引) in 对象"></标签>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="d1">
        <!--
            迭代 v值，i索引
        -->
        <ul>
            <li style="color: crimson" v-for="(v,i) in num">{{v}}--索引：{{i}}</li>
        </ul>

        <ul>
            <li style="color: deeppink" v-for="(v,i) in str">{{v}}--索引：{{i}}</li>
        </ul>

        <select>
            <option style="color: limegreen" v-for="(v,i) in address">{{v}}--索引：{{i}}</option>
        </select>

        <!-- k：key -->
        <ul>
            <li style="color: deepskyblue" v-for="(v,k,i) in person">{{v}}--{{k}}--索引：{{i}}</li>
        </ul>

    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#d1",
        data:{
            num:10,
            str:"qixiufang",
            address:["七秀","万花","蓬莱","五毒"],
            person:{
                name:"叶良辰",
                age:"20"
            }
        }
    })

</script>
</html>

3.4.4 v-bind

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="d1">
        <img v-bind:src="src" v-bind:width="width" v-bind:height="height">
        <hr>
        <!-- 简写 -->
        <img :src="src" :width="width" :height="height">
        <hr>
        <!-- 简写2 直接绑定 -->
        <img v-bind="options">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#d1",
        data: {
            src: "images/img1.jpg",
            width:200,
            height:330,
            options:{
                src: "images/img2.jpg",
                width:300,
                height:300
            }
        }
    })

</script>
</html>

3.4.5 v-model

<标签 v-model=“表达式”></标签>
在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>

</head>
<body>
    <div id="hello">
        {{hello}},
        <font color="#dc143c"> {{v()}}</font>
        <br><br><br>
        <input type="text" v-model="msg">
        <br>
        <h1 style="color: orangered">{{msg}}</h1>
        <br>
        <input type="checkbox" v-model="hob" value="game">玩游戏
        <input type="checkbox" v-model="hob" value="kds">看电视
        <input type="checkbox" v-model="hob" value="qdm">敲代码
        {{hob}}
        <br><br>
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="0">女
        {{sex}}
        <br><br>
        <select v-model="address">
            <option value="0">--请选择--</option>
            <option value="1">七秀</option>
            <option value="2">万花</option>
            <option value="3">五毒</option>
            <option value="4">蓬莱</option>
        </select>
        {{address}}
        <br><br>
        <textarea v-model="intro" rows="5" cols="25"></textarea>
        {{intro}}
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#hello",
        data:{
            hello:"你好啊",
            msg: "",
            v(){
                return "万花";
            },
            hob:["game,kds"],
            sex:1,
            address:0,
            intro:"寻找"
        }
    })
</script>
</html>

3.4.6 v-if

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>

</head>
<body>
    <div id="hello">
        <div v-if="age>=60&&age<100">{{age}}岁了<br>人老了</div>
        <div v-else-if="age>=30&&age<60">{{age}}岁了<br>人到中年不得已，保温杯里泡枸杞</div>
        <div v-else-if="age>=18&&age<30">{{age}}岁<br>小伙子你还年轻</div>
        <div v-else-if="age>0&&age<18">{{age}}岁<br>小屁孩儿</div>
        <div v-else>你是魔鬼吗</div>
        <br>
        <input v-model="age">
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#hello",
        data:{
            age:22
        }
    })
</script>
</html>

3.4.7 v-on

注册事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>

</head>
<body>
    <div id="hello">
        {{num}} <br>
        <input type="button" v-on:click="num++" value="自增">
        <br><br>
        <input type="button" @click="show('点我干嘛')" value="点我">
        <br><br>
        {{str}}  <br><br>
        <input type="button" @mouseover="over" @mouseout="out" value="鼠标放上来">
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#hello",
        data:{
            num:0,
            str:"移出"
        },
        methods:{
            show(msg){
                alert(msg)
            },
            over(){
                this.str = "移入..."
            },
            out(){
                this.str = "移出..."
            }
        }
    })
</script>
</html>

3.4.8 v-show

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>

</head>
<body>
    <div id="hello">
        <div v-show="isShow">点我会消失噢</div>
        <br>
        <input type="button" @click="show" value="点击显示或隐藏">
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#hello",
        data:{
            isShow:true
        },
        methods:{
            show(msg){
                this.isShow = !this.isShow
            }
        }
    })
</script>
</html>

一只羊驼啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue01

vue01一.ECMAScript的认识1.1什么是ECMAScript1.2ECMAScript61.2.1ES6语法声明变量1.2.2ES6语法解构表达式1.2.3ES6语法箭头函数二. Vue2.1Vue是什么？2.2 vue的安装三.vue的使用3.1使用vue的步骤3.2 helloVue.html3.3VueJs表达式3.4Vue指令3.4.1什么是指令3.4.2 v-text和v...
复制链接

扫一扫