Vue简单使用-01_vue this.fixtitleoffsety-CSDN博客

本文链接：https://blog.csdn.net/kxj19980524/article/details/90580829

在html文件中加入下面的js,就可以使用vue了.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

属性绑定,字符串展示,方法的调用.属性和方法的调用都是用{{}}符号来调用.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>{{greet("afternoot")}}</h1>
            <h1>Hey, {{ name }}</h1>
            <p>{{job}}</p>
            <a v-bind:href="website">web开发</a>
            <p><input type="input" v-bind:value="name"></p>
            <p v-html="websiteTag"></p>
        </div>
    </body>
    <script src="app.js"></script>
</html>

data里面都是键值对的形式,可以是字符串,数字,数组,对象,都可以.

//实例化vue对象
new Vue({
    /*
    el:element 需要获取的元素,一定是html中的跟容器
    data:用于数据的存储.
    methods:用于存储各种方法.
     */
    el:"#vue-app",
    data:{
       name:"康骁将",
        job:"web开发",
        website:"https://www.baidu.com/",
        websiteTag:"<a href='https://www.baidu.com/'>百度</a>"
    },
    methods:{
       greet:function (time) {
           return "Good "+time+""+this.name+"!"
       }
    }
});

事件的绑定

在事件中,因为肯定是个方法,所以不给括号也可以,给括号也可以,使用{{}}的话必须得加括号,如果不加的话会以为是字符串.下面的add,其实就是调用的是一个方法.

事件的绑定,v-on可以拿@替换 ,别的绑定不能替换.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>Events</h1>

            <!--<button v-on:click="age++">涨一岁</button>
            <button v-on:click="age&#45;&#45;">减一岁</button>-->

            <button @click="add(1)">涨一岁</button>
            <button v-on:click="subtract(1)">减一岁</button>

            <button v-on:dblclick="add(10)">双击:涨十岁</button>
            <button v-on:dblclick="subtract(10)">双击:减十岁</button>

            <div id="canvas" v-on:mousemove="updateXY">{{x}},{{y}}</div>

            <p>My age is {{age}}</p>
        </div>
    </body>
    <script src="app.js"></script>
</html>

在vue当中,也可以使用this关键字,用法类似于java里面的this.

//实例化vue对象
new Vue({
    /*
    el:element 需要获取的元素,一定是html中的跟容器
    data:用于数据的存储.
    methods:用于存储各种方法.
     */
    el:"#vue-app",
    data:{
       age:22,
        x:0,
        y:0
    },
    methods:{
        add:function (inc) {
            if(inc){
                this.age+=inc;
            }else{
                this.age++;
            }
        },
        subtract:function (dec) {
            if(dec){
                this.age-=dec;
            }else{
                this.age--;
            }
        },
        updateXY:function (event) {
            //console.log(event);
            this.x=event.offsetX;
            this.y=event.offsetY;
        }
    }
});

事件修饰符 once表示只能点击一次,stop表示,鼠标移动到span标签上就停止当前事件

下面这个方法是获取到鼠标的x,y坐标.

键盘事件修饰符,enter键按下的时候才触发事件

数据双向绑定,span里面的值根据表单里的值而变化.

双向绑定方式2 直接使用v-model里面的name是与js里的name变量绑定

计算属性,当方法中有计算属性时,每当变量改变,就会把方法都调用一次,非常影响性能,使用computed就不会出现那样的情况了.使用computed的时候,不加括号,它自己会从computed找.

绑定css,class,在v-bind:class="{},大括号里面,可以写多个,key为class名字,value为boolean,来设置这个值存不存在.大括号属于一个对象.

也可以通过计算属性方法来实现,如果改变的样式多的话,就可以使用方法的形式返回.

v-if条件判断

改成else-if就俩个只能展示一个

使用v-show的话,只是为display:none,这个标签还存在,而上面的话,连标签都没有了.

v-for循环操作 template标签会优化标签.省去多余的遍历.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>v-for</h1>
            <p>{{names[0]}}</p>
            <p>{{names[1]}}</p>
            <p>{{names[2]}}</p>
            <p>--------------</p>
            <div v-for="name in names">
                {{name}}
            </div>
            <p>--------------</p>
            <template v-for="name in names">
                <h6>{{name}}</h6>
            </template>
            <p>--------------</p>
            <ul>
                <li v-for="user in users">
                    {{user}}
                </li>
            </ul>
            <p>--------------</p>
            <ul>
                <li v-for="user in users">
                    {{user.name}}-
                    {{user.age}}
                </li>
            </ul>
            <p>--------------</p>
            <ul>
                <li v-for="(user,index) in users">
                    {{index+1}}-{{user.name}}-
                    {{user.age}}
                </li>
            </ul>
            <template v-for="(user,index) in users">
                <template v-for="(key,value) in user">
                    <p>{{index}}-{{key}}-{{value}}</p>
                </template>
            </template>
        </div>
    </body>
    <script src="app.js"></script>
</html>

调用多个vue对象

组件的使用,直接就可以使用自定义标签来展示内容,template就是标签展示的内容.组件当中的data,methods可以在template里面直接使用.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <h1>初识Vue组件</h1>
       <div id="vue-app-one">
           <greeting></greeting>
        </div>

    <div id="vue-app-two">
        <greeting></greeting>
    </div>
    </body>
    <script src="app.js"></script>
</html>


Vue.component("greeting",{
    template:`<p>{{name}}:大家好
                <button v-on:click="changeName">改名</button>
               </p>`,
    data:function () {
        return {
            name:"康骁将"
        }
    },
    methods:{
        changeName:function () {
            this.name = "ch";
        }
    }
})

var one  = new Vue({
    el:"#vue-app-one"
});

var two  = new Vue({
    el:"#vue-app-two"
});