0%

vue_baselearning

Vue基本入门知识点整理

Vue基本架构:

1
2
3
<div id="app">
{{templete}}
</div>
1
2
3
4
5
6
7
8
9
const app = new Vue({
el:"#app",
data:{
templete:"VUE"
},
methods:{

}
})

el是绑定选中的元素的作用域,不可绑定在Html和body标签,里面可以绑定其他DOM元素,例如id,class,标签等,对应着#id.class标签

Vue在body里面定义的元素数据,用到的数据定义在data中,data中可以写复杂类型的数据,渲染复杂类型的数据时,遵守js的语法即可


Vue函数:

  • v-text

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div id="app">
    <h1 v-text="context_name+'lalala'">哈哈哈</h1>//输出“他在lalala”
    <h1 v-text="context_name">呵呵呵</h1>//输出“他在”
    <h1>{{message}}咳咳咳</h1>//输出“我在咳咳咳”
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    message:"我在",
    contex_name:"他在"
    }
    })
    </script>

v-text指令的作用是:设置标签的内容(textContent)

默认的写法会替换全部内容,使用差值表达式可以替换指定内容

内部支持写表达式

  • v-html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id="app">
    <h1 v-html="baidu">哈哈哈</h1>//输出一个普通文本字符
    <h1 v-html="baiduurl">哈哈哈</h1>//输出一个超链接字符
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    baidu:"百度",
    baiduurl:"<a herf="https://www.baidu.com">百度</a>"
    }
    })
    </script>

v-html指令的作用是:设置元素的innerHTML

内容中有html结构会被解析为标签

而对于v-text,v-text指令无论内容是什么,都只会解析成文本

解析文本使用v-text,需要解析html结构使用v-html

  • v-on基础

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div id="app">
    <input type="button" value="鼠标单击" v-on:click="do" />
    <input type="button" value="鼠标移入" v-on:click="do" />
    <input type="button" value="鼠标双击" v-on:click="do" />
    <input type="button" value="鼠标双击简写" @dblclick="do" />
    <h2 @click="changeword">{{name}}</h2>
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    name:"小白"
    },
    methods:{
    do: function(){
    alert("你触发了");
    }
    changeword: function(){
    this.name += 小白
    }
    }
    })
    </script>

v-on指令的作用是:为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

  • v-show基础

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="app">
    <input type="button" value="显示/隐藏文字" v-on:click="show" />
    <h2 v-show="isShow">你看到我吗</h2>
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    isShow:true
    },
    methods:{
    show: function(){
    this.isShow = !this.isShow;
    }
    }
    })
    </script>

v-show指令的作用是:根据真假切换元素的显示状态

原理是修改元素的disalay,实现显示隐藏

指令后面的内容,最终都会解析成布尔值

值为true元素显示,值为false元素隐藏

数据改变之后,对应元素的显示状态会同步更新

  • v-if

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="app">
    <input type="button" value="显示/隐藏文字" v-on:click="show" />
    <h2 v-if="isShow">你看到我吗</h2>
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    isShow:true
    },
    methods:{
    show: function(){
    this.isShow = !this.isShow;
    }
    }
    })
    </script>

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树种,为false,从dom树中移除

  • v-bind

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <style>
    .abc{
    border: 1px solid red;
    }
    </style>

    <div id="app">
    <input type="button" @onclick="show">
    <img v-bind:src="imgSrc">
    <img v-bind:title="imgtitle">
    <img v-bind:class="ifShowClass:'classname':''">//三目运算符方式
    <img v-bind:class="{classname:ifShowClass}">//对象方式
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    imgSrc:"./图片地址",
    imgtitle:"图片名称",
    ifShowClass:false,
    classname:"abc"
    },
    methods:{
    show:function(){
    this.ifShowClass =!this.ifShowClass;
    }
    }
    })
    </script>

v-bind指令的作用是:为元素绑定属性

完整的写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留 :属性名

需要动态的增删ckass建议使用对象的方式

  • v-for

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div id="app">
    <ul>
    <li v-for="item in arr">第{{index+1}}个是{{item}}</li>//跟for in里面的索引不同
    <li v-for="(item,index) in arr1">{{index}}今年{{item.name}}岁了</li>
    </ul>
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    arr:["a","b","c","d","e"],//数组
    arr1:[{
    "小明":13,
    "小绿":15
    }]//对象数组
    },
    methods:{

    }
    })
    </script>

v-for指令的作用是:根据数据生成列表结构

数组经常和v-for结合使用

语法是(item,index) in 数据

item和index可以结合其他指令一起使用

  • v-on补充

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div id="app">
    <input type="button" @click="lalala(1,2)" />
    <input type="text" @keyup:enter="test" />
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{

    },
    methods:{
    lalala: function(p1,p2){
    console.log(p1);
    console.log(p2);
    }
    test: function(){
    alert("test");
    }
    }
    })
    </script>

事件绑定的方法写成函数调用的形式,可以传入自定义参数

定义方法是需定义形参来接收传入的实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有很多种,具体更多详情请看文档 Https://cn.vuejs.org/v2/api/@v-on

  • v-model

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div id="app">
    <input type="text" v-model="message" />
    <h2>{{message}}</h2>
    </div>

    <script>
    const app = new Vue({
    el:"#app",
    data:{
    message:"nihaoa"
    },
    methods:{

    }
    })
    </script>

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据⬅️➡️表单元素的值

欢迎关注我的其它发布渠道