vue基础用法

起步：

创建一个Vue对象，所有数据放在data里面，所有方法放在methods里面

<div id="root">
    {{a}} + {{b}} = {{a + b}} <br>
    {{a}} + {{b}} = {{sum()}} <br>
</div>

let vm = new Vue({
    el:'#root',
    data:{//数据
        a : 100,
        b : 200
    },
    methods : {
        sum(){
            return this.a + this.b //这里的记得要加this
        }
    }
})

• {{}}:双大括号表示vue表达式：写一些简单的表达式(如：{{new Date()}})
• vue表达式不能输出到标签里面(不能用来输出属性)，只能用到innerHTML里

指令(direction)--补充了html的属性

v-bind: 动态数据绑定，可以简写成‘:’
用于向html属性里面输出东西:v-bind:title、v-bind:src

冒号后面的内容可以是变量或表达式

class：可以直接用数组
style：可以直接用json

<div id="root">
    <div v-bind:title='a'>v-bind:title test</div>

    <div :class='arr'>v-bind:class test</div>

    <div :style='json'>:style test</div>
</div>

let vm = new Vue({
    el:'#root',
    data:{
        a: 'hello',
        arr: ['bgc-red','font-20'],
        json:{width:'100px',height:'100px',border:'1px solid','background-color':'blue'}
    }
})

v-model:数据双向绑定

数据和input(或其他输入框)之间双向绑定
vue内部自动完成数据控制层

<!-- 在input元素上加v-model属性表示数据双向绑定 -->
<!-- 通过input标签进入的数据都是字符串 -->
<input type="text" v-model='a'> + <input type="text" v-model='b'> = {{ a + b }} <br>
<input type="text" v-model='c'> + <input type="text" v-model='d'> = {{ parseInt(c)  + parseInt(d) }}

let vm = new Vue({
    el:'#root',
    data:{
        a: 1,
        b: 2,
        c: 1,
        d: 2  
    }
})

注意：通过input进来的数据都是字符串

v-text:没什么用

<div v-text='aaa'></div>
相当于：
<div class="">
  {{aaa}}
</div>

data{
  aaa:111
}

v-html:直接输出html

相当于将变量作为innerHTML输出到标签内

<div id="root">
    <!-- v-pre表示预处理,标签里面的内容原样输出 -->
    <p v-pre>使用vue表达式{{}}</p>
    <div>
        {{myHtml}} 
        <!-- 效果为将内容作为字符串输出 -->
    </div>
    <hr>

    <p>使用v-text</p>
    <!-- 效果与{{}}一样 -->
    <div v-text="myHtml"></div>
    <hr>

    <p>用了v-html</p>
    <div v-html = 'myHtml'></div>
    <!-- 将内容作为表单元素输出 -->
</div>

let vm = new Vue({
    el:'#root',
    data:{
        myHtml: `
        <form action="">
            username:<input type="text"><br>
            password:<input type="text"><br>
        </form>
        `
    }
})

vue事件

语法

v-on:click="fn()" 括号可以不加，只要没参数
简写：@click="fn()"

    <div id="root">
        <!-- 简写为:click -->
        <button v-on:click='test()'>click me</button>
    </div>

let vm = new Vue({
    el:'#root',
    methods:{
        test(){
            alert('hello')
        }
    }
})

事件修饰符

@click='fn()'

• @click.stop = 'fn()'//禁止冒泡

• @click.once 单次事件

• @click.prevent 阻止默认事件(阻止表单提交)

• vue事件中的this是window对象

• 可以多个@click.stop.once

• @click.native 原生事件，跟组件配合

• @keydown.数字|ctrl : .keycode|名字, 可以按组合键

• @click.self: 只触发自己的事件

• @click.capture 捕获阶段的事件

<div id="root">
    <hr>
    <h3>事件冒泡修饰符：.stop</h3>
    <p>不阻止事件冒泡</p>
    <div @click='divClick()'>
        <button @click='btnClick()'>事件冒泡</button>
    </div>
    <p>阻止事件冒泡</p>
    <div @click='divClick()'>
        <button @click.stop='btnClick()'>事件冒泡</button>
    </div>
    <hr>

    <h3>单次事件: .once</h3>
    <p>只执行一次</p>
    <button @click.once='btnClick()'>单次事件</button>
    <hr>

    <h3>阻止默认事件</h3>
    <form action="http://aaa.com">
        <input type="submit" @click.prevent='submitClick()'>
    </form>
    <hr>
    <h3>键盘事件</h3>
    <!-- 只有获得焦点的元素才能触发 -->
    <button @keydown.ctrl='keydown()'>键盘事件：ctrl</button>
    <button @keydown.ctrl.shift='keydown()'>组合键:ctrl + shift</button>

</div>

let vm = new Vue({
    el:'#root',
    methods:{
        divClick(){
            alert('div Clicked')
        },
        btnClick(){
            alert('btn Clicked')
        },
        submitClick(){
            alert('表单不会提交');
        },
        keydown(){
            alert('keydown')
        }
    }
})

v-if和v-show

v-if：元素是否存在
v-show：元素是否显示

<div id="root">
    <button @click="toggle1()">toggle1</button>
    <!-- v-if 设置一个元素是否存在dom中 -->
    <div class="div1" v-if="isDivExist" :style='style1'>div1</div>
    <button @click="toggle2()">toggle2</button>
    <!-- v-show 设置一个元素是否显示 -->
    <div class="div2" v-show="isDivShow" :style='style2'>div2</div>
    
</div>

let vm = new Vue({
    el:'#root',
    data:{
        style1:{widht:'100px',height:'100px','background-color':'skyblue'},
        style2:{widht:'100px',height:'100px','background-color':'red'},
        isDivExist:true,
        isDivShow:true
    },
    methods:{
        toggle1(){
            this.isDivExist = !this.isDivExist;
        },
        toggle2(){
            this.isDivShow = !this.isDivShow;
        }
    }
})

v-for循环

vue 的v-for可以循环：数组、对象、字符串、数字

<div id="root">
    <p>遍历数组</p>
    <ul>
        <li v-for="user,index in users">
            <p>
                username:{{user.username}} <br>
                age:{{user.age}} <br>
                index: {{index}}
            </p>
        </li>
    </ul>
    <p>遍历json</p>
    <ul>
        <li v-for="value,key in json">
            <p>
                {{key}}:{{value}}
            </p>
        </li>
    </ul>
    <p>遍历字符串</p>
    <ul>
        <li v-for="char,index in str">
            {{index}} : {{char}}
        </li>
    </ul>
    <p>遍历数字</p>
    <ul>
        <li v-for="i,index in 10">
            index:{{index}}  value:{{i}}
        </li>
    </ul>
</div>

let vm = new Vue({
    el:'#root',
    data:{
        users:[
            {username:'zhangsan',age:'18'},
            {username:'lisi',age:'19'},
            {username:'wangwu',age:'20'}
        ],
        json:{
            a:'aaa',
            b:'bbb',
            c:'ccc'
        },
        str:'abcdefg'
    }
})

v-pre

禁用vue表达式:提高性能,防止意外

<!-- v-pre:预编译，禁用vue表达式 -->
<div v-pre>
    {{}}是vue的表达式
</div>

v-cloak

防止vue代码(如{{}}符号)意外显示

<style>
    [v-cloak]{
        display: none;
    }
</style>
<!-- 页面未加载玩完时会有这个属性 -->
<div v-cloak>
    {{a}}
</div>

function sleep(d){
    for(let t = Date.now();Date.now() - t <= d;);
}
sleep(1000)
let vm = new Vue({
    el:'#root',
    data:{
        a:'hello'
    }
})

computed-计算属性

computed的优势

• 带缓存：性能更高(只有数据变了才会计算)
• 方便：即可以读，又可以写

    <div id="root">
        {{a}} + {{b}} = {{sum}}
    
        <p>姓名分解</p>
        姓：<input type="text" v-model='familyName'>
        名：<input type="text" v-model='givenName'>
        姓名: <input type="text" v-model="nameCalc">
    </div>

let vm = new Vue({
    el:'#root',
    data:{
        a: 1,
        b: 2,
        familyName:'张',
        givenName:'三'
    },
    computed:{
        sum(){
            return this.a + this.b;
        },
        nameCalc:{
            set(value){//设置data
                this.familyName=value.substring(0,1);
                this.givenName=value.substring(1);
            },
            get(){
                return this.familyName + this.givenName;
            }
        }
    }
})

watch--监听：

<div id="root">
    <input type="text" v-model="a">
    {{a}}
</div>

let vm = new Vue({
    el:'#root',
    data:{
       a:'aaa'
    },
    watch:{
        a(newVal,oldVal){
            alert(`a changed: newVal:${newVal},oldVal:${oldVal}`)
        }
    }
})

最后

最近几天在学习vue，整理了下vue的基础语法，之后会将vue组件，路由，vue-cli，vuex等内容整理出来