vue_day1

最新推荐文章于 2024-09-22 14:07:43 发布

古娜拉黑暗之源

最新推荐文章于 2024-09-22 14:07:43 发布

阅读量144

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_46002365/article/details/103772508

版权

java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

准备阶段

在Terminal面板输入
1.npm init -y 初始化
2.npm install vue 局部安装(当前项目使用)

导入vue的核心库
引入js文件不能使用单标签并且标签内不能有东西
该页面有一个内置对象叫做Vue

 <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>

es6语法规范

1声明变量的方式.html

<script type="text/javascript">
    /*
    ： var和let申明变量的区别
    let是申明块级的变量（局部变量）
    */
        var a = 5;
        let b = 5;
        console.debug("var"+a,"let"+b);
        for(var i=0;i<10;i++){

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

        }
             console.debug("let"+j);
    /*
     *es6语法规范2： const
    * const 也是用来申明变量的，被const申明的变量就是一个常量
    * */
    const c = 4;
    console.debug("改变前"+c);
    c = 5;//c变量是一个常量，一旦赋值之后，该值是不能被更改的
    console.debug("改变后"+c);
</script>

2解构表达式.html

<script type="text/javascript">
    var arr = ["cc", "xx", "yy"];
    //结构数组
    var [a,b,c] = arr
    console.debug(a)
    console.debug(b)
    console.debug(c)

    var p = {
        name:"春丽",
        age:22,
        sex:true
    }
  /*  var {name,age,sex} = p
    console.debug(name)
    console.debug(age)
    console.debug(sex)*/

    function test({name,age,sex}){
        console.debug("解析", name, age, sex);
    }
    test(p)

</script>

3箭头表达式.html

<script type="text/javascript">
    var p = {
        name:"王天霸",
        age:22,
        show1:function(msg){
            //以前最开始申明函数的方式
            console.debug(this.name + "   " + this.age);
        },
        //新的写法1  箭头函数this是属于当前创建环境this是一致的
        show2:(msg)=>{
            //如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window
            console.debug("方式一",p.name,this.name);
        },
        show3(msg){//新的写法2
            console.debug("方式二");
        }
    }

    p.show1();
    p.show2();
    p.show3();

</script>

04Promise的使用.html

<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)
        }
    })//以后上面这坨代码我们都看不到的

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

05模块化.html

//导出方案1
/*
export const util = {
        sun1(){

        },
        sun2(){

        }
}
*/

//导出方案2
/*
const util = {
        sun1(){

        },
        sun2(){

        }
}
export  util;
*/
/*
let name = "名字";  一次性导出多个
let age = 22;
const person = {
    show(){

    }
}
export {name, age,person};
*/

//导出默认的名字
export default {
    show1(){

    }
}

export default{
    show2(){

    }
}

/*import util from "b"   名字叫做util*/
/*import {name, age,person} from "b";  一次导入多个*/
import randomfrom "b"

random.show1();
random.show2()

06vueTest.html

<body>
<!--准备dom节点-->
<div id="app">
    {{msg}}<br>
    <span style="color: deeppink">{{msg}}</span><br>
    {{person}}
    <br>
    {{person.name}}
    <br>
    <span style="color: deeppink">{{sayHello1()}}</span><br>
    <span style="color: deeppink">{{sayHello2('传递参数')}}</span><br>
</div>
{{msg}}
</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el：申明挂载的视图*/
        el:"#app",
        /*准备的数据*/
        data:{
            msg:"hello vue",
            person:{
                name:"person",
                age:22,
                sex:"男"
            },
            sayHello1(){
                return "Hello";
            },
            sayHello2(msg){
                return msg;
            }
        }
    });
    //数据改变
    vue.msg = "数据随之改变";
</script>

07vue_ el.html

<body>
<!--准备dom节点-->
<div id="app">
    id: <span style="color: deeppink">{{msg}}</span><br>
</div>
<div class="app">
    class1: <span style="color: deeppink">{{msg}}</span><br>
</div>
<div class="app">
    class2: <span style="color: deeppink">{{msg}}</span><br>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el：申明挂载的视图*/
        el:"#app",
        /*准备的数据*/
        data:{
            msg:"id",
        }
    });
    var vue = new Vue({
        /*el：申明挂载的视图*/
        el:".app",
        /*准备的数据*/
        data:{
            msg:"class",
        }
    });
</script>

08vue_ date.html

<body>
<div id="app">
    {{msg}}</br>
    {{num}}</br>
    {{person}}</br>
</div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"测试",
            num:11,
            sex:true,
            person:{
                name:"测试弹窗",
                age:33
            }
        }
    });
    alert(vue.person.name);
    </script>

09vue_ method.html

<body>
<!--准备dom节点-->
<div id="app">
    {{sayHello("AAAA")}}=={{sayHello1()}}
</div>


</body>
<script type="text/javascript">
    /*
       methods:当前vue实例中所有的方法都放在methods中
    *
    * */
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "测试",
            name: "姓名",
            sex: true
        },
        methods: {
            sayHello(msg) {
                alert(msg);
                return "改变";
            },
            sayHello1() {
                return "姓名：" + this.name + "  性别：" + this.sex;
            }
        }
    });

    console.debug(vue.sayHello1());
    alert(vue.person.name);


    alert(vue.sayHello());


</script>

10vue_运算和三目.html

<!--准备dom节点-->
<div id="app">
    {{num1}}+{{num2}}={{num1+num2}}<br/>
    {{num1}}-{{num2}}={{num1-num2}}<br/>
    {{num1}}*{{num2}}={{num1*num2}}<br/>
    {{num1}}/{{num2}}={{num1/num2}}<br/>
    {{num1}}%{{num2}}={{num1%num2}}<br/>
    <!--   vue三目运算中认为false的有6个值：  0 null  NaN  undefined   false  ""  其它值全部为true-->
    {{sex?"男":"女"}}
</div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num1:10,
            num2:5,
            sex:0
        }
    });
</script>

11vue 字符串方法.html

<body>
<!--准备dom节点-->
<div id="app">
    <!--  注意：胡须表达式 它也是可以调用对等类型的方法-->
    {{str}}<br>
    {{str.length}}<br>
    <!--第二位到第四位-->
    {{str.substring(2,5)}}<br>
    <!--第二位开始截取五个-->
    {{str.substr(2,5)}}<br>
    <!--大写-->
    {{str.substring(2,5).toUpperCase()}}<br>
    {{str.substring(2,5).toLowerCase()}}<br>
</div>


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

12vue-v-text和v-html.html

<body>
    <!--准备dom节点-->
    <div id="app">
        <!--v-text：
        如果设置的代码有html代码，它只会当成一个纯文本进行展示
        -->
        <div v-text="text">
            text
        </div>
        <!--v-html：
       如果设置的代码有html代码，能被浏览器所解析的
        -->
        <div v-html="html">
            html
        </div>
    </div>


</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           text:"<h1>text</h1>",
           html:"<h1>html</h1>"

        }
    });
</script>

13vue-v-for.html

<body>
    <!--准备dom节点-->
    <!--在vue中循环迭代支持的元素：
    整数  字符串  数组  对象-->
    <div id="app">
        <ul>
            <!--如果是数字 它默认是从1开始的-->
            <li v-for="(v,i) in number">{{v}} |索引:{{i}}</li>
        </ul>

        <hr/>
        <!--如果你对字符串进行循环迭代，那每次拿到的是每个字符-->
        <p v-for="(v,i) in str">{{v}}  |索引:{{i}}</p>
        <hr/>

        <select>
           <!--循环数组，拿到的值就是数组中的元素-->
           <option v-for="(v,i) in hobbys">{{v}} |索引:{{i}}</option>

        </select>

        <hr/>
        <!--循环对象    -->
        <span v-for="(v,k,i) in person">属性名{{k}}</span><br>
        <span v-for="(v,k,i) in person">      值{{v}}</span><br>
        <span v-for="(v,k,i) in person">    索引{{i}}</span><br>
    </div>


</body>
<script type="text/javascript">

    var vue = new Vue({
        el:"#app",
        data:{
           number:10,
           str:"itsource",
           hobbys:["唱","跳","rap","篮球"],
           person:{
               name:"1",
               email:"2",
               skill:"3"
           }
        }
    });
</script>

14vue-v-bind.html

<body>
    <!--v-bind  主要用来绑定属性的-->
    <div id="app">
        <!--方式1-->
        <!--取出所有字段-->
        <img v-bind:Property="myProperty" v-bind:src="src" v-bind:width="width"
             v-bind:height="height" v-bind:alt="alt">
        <!--方式2-->
        <!--省略v-bind-->
       <img :xxx="myProperty" :src="src" :width="width" :height="height" :alt="alt">
        <!--方式3-->
        <!--传递一个对象-->
        <img v-bind="options">
        <img v-bind="options">
    </div>


</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            src:"timg.jpg",
            width:"auto",
            height:"auto",
            alt:"正在加载中",
            myProperty:"自定义属性",
           options:{
                src:"timg.jpg",
                width:"auto",
                height:"auto",
                alt:"正在加载中",
                myProperty:"自定义属性"
            }

        }
    });
</script>

15vue-v-model.html

<body>
    <!--
        v-model  双向绑定
        支持的标签：<input>
                  <select>
                  <textarea>
    -->
    <div id="app">
        <input type="text" v-model="Customtext">{{Customtext}}
        <hr/>
        <br>
        <!--多选-->
        <input type="checkbox" v-model="num" value="1">1
        <input type="checkbox" v-model="num"  value="2">2
        <input type="checkbox" v-model="num"  value="3">3
        <input type="checkbox" v-model="num"  value="4">4
        <br/>
        {{num}}
        <br>
        <hr/>
        <br>
        <!--单选-->
        <input type="radio" v-model="sex" value="0">女
        <input type="radio" v-model="sex" value="1">男
        <br/>
        {{sex}}
        <br>
        <hr/>
        <!--下拉-->
        <select v-model="country">
            <option value="-1">请选择</option>
            <option value="1">中国</option>
            <option value="2">美国</option>
            <option value="3">日本</option>
        </select>
        {{country}}
        <br>
        <hr/>
        <textarea v-model="intro"></textarea>{{intro}}
        <br>
        <hr/>
    </div>


</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            Customtext:"默认值",
            num:["1","4"],
            sex:0,
            country:"-1",
            intro:"输入框"
        }
    });
</script>

16vue-v-if.html

<body>
    <div id="app">
        <span style="color: red;" v-if="myColor==1">红色</span>
        <span style="color: deeppink" v-else-if="myColor==2">粉色</span>
        <span style="color: darkgreen;" v-else-if="myColor==3">绿色</span>
        <span style="color: darkblue;" v-else>蓝色</span>
    </div>

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

17vue-v-on.html

<body>
    <!--v-on: 语法格式，应该写表达式或者触发的函数-->
    <div id="app">
        <!--方式一-->
        <input type="button" v-on:click="num++" value="计数器">
        {{num}}
        <hr/>
        <!--方式二-->
        <input type="button" @click="show('参数传递')" value="点击事件">
        <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("点击成功"+" "+msg+"成功");
            },
            over(){
                alert("接触成功");
            },
            out(){
                alert("离开成功");
            }
        }
    });
</script>

18vue-v-show.html

<body>
    <!--v-show: 控制标签属性   style="display: block" 或者 style="display: none"-->
    <div id="app" >
        <div v-show="isShow1">隐藏</div>
        <div v-show="isShow2">显式</div>
        <input type="button" @mouseover="over" @mouseout="out" value="显示和隐藏">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            isShow1:true,
            isShow2:false
        },
        methods:{
            over(){
                this.isShow1 = !this.isShow1;
                this.isShow2 = !this.isShow2;
            },
            out(){
                this.isShow1 = !this.isShow1;
                this.isShow2 = !this.isShow2;
            }
        }
    });
</script>