first_vue基本使用

 

 

vue官方链接

1.第一次使用

<div>
    <h1>{{message}}</h1>  # 传数据的{{}}
    <p @click="num+=1">{{num}}</p>
</div>
<script>
    // 创建vue对象,Vue首字母大写的
    let vm = new Vue({
        el:"#app", // 当前vue对象可以操作的页面范围，一般就是ID元素的选择符
        data:{     // 当前vue对象要输出到html页面中的数据
            message:"登录错误!",
            num: 10084,
        }
    });
</script>

2.vue显示数据

# img的传输，关于v-html方法
<div id="index">
    {{num.split("").reverse().join("").toUpperCase()}}<br>
    <input type="text" v-model="num"><br>
    <span v-html="img"></span>
</div>
<script>
    let vm = new Vue({
        el:"#index",
        data:{
            num:"hello",
            img:"<img src='https://www.luffycity.com/static/img/head-logo.a7cedf3.svg'>"
        }
    })
</script>

3.事件操作

# 关于:分号的操作
<div id="index">
    <img :src="url" :alt="title"><br>
    <input :type="type" placeholder="请输入wifi密码">
    <button @click="clickhander">{{type_tips}}</button>
    <button v-on:click="clickhander">{{type_tips}}</button>
</div>

<script>
    let vm = new Vue({
        el:"#index",
        // 在data可以定义当前vue对象调用的属性,调用格式: this.变量名,例如： this.title
        data:{
          url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg",
          title:"路飞学成",
          type:"password",
          type_tips: "显示密码",
        },
        methods:{ // 在methods中可以定义当前vue对象调用的方法,调用格式：this.方法名(),例如： this.clickhander()
            clickhander(){
                // alert(this.type); // 调用上面的data里面的数据
                if(this.type=="password"){
                    this.type="text";
                    this.type_tips="隐藏密码";
                }else{
                    this.type="password";
                    this.type_tips="显示密码";
                }
            }
        }
    })
</script>

 

4.关于样式

<style>
    .red{
        color: red;
        border: 1px solid blue;
    }
    .bg{
        background: yellow;
    }
</style>
        <!-- :class={css样式类名: 变量} -->
<p :class="{red:red_bool,bg:bg_bool}">一段文本</p>
<button @click="red_bool=false;">去掉样式</button>
<button @click="red_bool=true;">添加样式</button>

 

5.if-elseif-else

    <div id="box">
        <span v-if="sex==0">男</span>

        <span v-else-if="sex==1">女</span>

        <span v-else>保密</span>
    </div>

    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                sex:0, // 假设有个变量表示性别
            }
        })
    </script>

 

6.过滤器

    <!-- 不能过滤特殊字符串值 -->
    <div id="app">
        价格：{{price|keepdot2(3)|RMB}}<br>
        价格：{{price|keepdot2(3)}}<br>
    </div>
    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{
                price: 20.3
            },
            methods:{},
            // 普通过滤器[局部过滤器]
            filters:{
                keepdot2(value,dot){
                    return value.toFixed(dot)
                }
            }
        })
    </script>

 

7.监听属性

    <div id="app">
        <form action="">
            账号：<input type="text" v-model="form.username"><span :style="user_style">{{user_text}}</span><br><br>
            密码：<input type="password" v-model="form.password"><br><br>
            确认密码：<input type="password" v-model="form.password2"><br><br>
        </form>
    </div>
    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{
                form:{
                    username:"",
                    password:"",
                    password2:"",
                },
                user_style:{
                    color: "red",
                },
                user_text:"用户名长度只能是4-10位"
            },
            // 监听属性
            // 监听属性的变化
            watch:{
                "form.username":function(value){
                    if(value.length>=4 && value.length<=10){
                        this.user_style.color="blue";
                        this.user_text="用户名长度合法！";
                    }else{
                        this.user_style.color="red";
                        this.user_text="用户名长度只能是4-10位！";
                    }
                }
            }
        })
    </script>

 

8.vm对象的生命周期

        // vm初始化时会有以下几个阶段
        // 1. vm对象创建

        // 2. vm对象把数据添加到data属性中

        // 3. vm对象显示数据到视图模板html页面中

        var vm1 = new Vue({
            el:"#app",
            data:{
                user_text:"用户名长度只能是4-10位"
            },
            // vm对象把数据添加到data属性之前
            beforeCreate(){
                console.log("--------beforeCreate---------");
                console.log("$data=",this.$data);
                console.log("$el",this.$el);
                console.log("user_text="+this.user_text)
            },
            // vm对象把数据添加到data属性之后
            created(){
                // 使用ajax到后盾获取数据给data
                console.log("----------created-------------");
                console.log("$data=",this.$data);
                console.log("$el",this.$el);
                console.log("user_text="+this.user_text)
            },
            // vm对象显示数据到视图模板html页面之前
            // 如果执行 beforeMount，则表示vm对象已经获取到模板ID对象
            beforeMount(){
                console.log("----------beforeMount-------------");
                console.log("$el",this.$el);
            },
            // vm对象显示数据到视图模板html页面以后
            mounted(){
                // 使用ajax或者js在页面刷新前，完成页面修改的操作
                console.log("----------mounted-------------");
                console.log("$el",this.$el);
            }
        })

 

9.阻止事件

    <div id="app">
        <form action="">
        账号：<input type="text" v-model="user"><br><br>
        密码：<input type="password" v-model="pwd"><br><br>
        <button @click.prevent="loginhander">登录</button>
        </form>
    </div>
    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{
                user:"",
                pwd:"",
            },
            methods:{
                loginhander(){
                    if(this.user.length<3 || this.pwd.length<3){
                        // 长度太短不能登录
                        alert("长度太短不能登录");
                    }else{
                        // 页面跳转
                        location.assign("http://www.baidu.com")
                    }
                }
            }
        })
    </script>

 

10.阻止冒泡

    <div id="app">
        <div class="box1" @click="show1">
            <div class="box2" @click="show2">
                <p @click.stop="show3">一段文本</p>
            </div>
        </div>
    </div>

    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{},
            methods:{
                show1(){
                    console.log("box1");
                },
                show2(){
                    console.log("box2");
                },
                show3(){
                    console.log("点击了p标签");
                }
            }
        })
    </script>

 

11.vue实现todolist

    <div id="todolist" class="list_con">
        <h2>To do list</h2>
        <input type="text" v-model="message" class="inputtxt">
        <input type="button" @click="addItem" value="增加" class="inputbtn">
        <ul id="list" class="list">
            <li v-for="item,key in dolist">
                <span>{{item}}</span>
                <a @click="upItem(key)" class="up" > ↑ </a>
                <a @click="downItem(key)" class="down"> ↓ </a>
                <a @click="delItem(key)" class="del">删除</a>
            </li>
        </ul>
    </div>
    <script>
    // 计划列表代码
    let vm = new Vue({
        el:"#todolist",
        data:{
            message:"",
            dolist:[
                "学习html",
                "学习css",
                "学习javascript",
            ]
        },
        methods:{
            addItem(){
                if(this.messsage==""){
                    return false;
                }

                this.dolist.push(this.message);
                this.message = ""
            },
            delItem(key){
                // 删除和替换
                // 参数1: 开始下表
                // 参数2: 元素长度，如果不填默认删除到最后
                // 参数3: 表示使用当前参数替换已经删除内容的位置
                this.dolist.splice(key, 1);
            },
            upItem(key){
                if(key==0){
                    return false;
                }
                // 向上移动
                let result = this.dolist.splice(key,1);
                this.dolist.splice(key-1,0,result[0]);
            },
            downItem(key){
                // 向下移动
                let result = this.dolist.splice(key, 1);
                console.log(result);
                this.dolist.splice(key+1,0,result[0]);
            }
        }
    })
    </script>