Vue.js

原创于 2024-11-26 17:48:45 发布 · 937 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1.字符串类型转列表类型

遍历：v-for

监听事件：v-on 语法糖：@

指定挂载哪个元素：el

语法糖：简写

v-once : 只显示第一次的数据，不会跟着变化，后边不用跟任何数据

v-html = " url " : 让文本以链接形式呈现在页面中

v-text : 与mustache用法类似，用于将数据显示在界面中，但是v-text会覆盖掉原来标签中的内容

v-pre ：把标签中的内容原封不动的显示出来不改变任何信息

v-bind : 动态的绑定属性，语法糖： :

2.加减按钮控制数字增减

3.很牛，没有想到的

4.创建vue时，Options里可以放哪些东西

data

computed：计算属性一般没有set方法，只读属性

methods

生命周期函数

filters

5.let 和var

var可以说是JAVAScript设计语言中的一个错误，早在十年前Blendan Eich添加了一个新的关键字：let，修复了这个错误，let可以看作完美的var，let可以定义块级作用域

ES5中的var是没有块级作用域的（if/for）

ES6中的let是有块级作用域的（if/for)

6.const

注意一：一旦给const修饰的标识符被赋值之后，不能修改

注意二：在使用const定义标识符，必须进行赋值

注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

const obj ={
    name = 'Sihan',
    age = 23,
    height = 170
}

7.ES6字面量的增强语法

1）属性的增强写法

const name = 'Sihan';
const age = 23;
const height = 170;
const obj = {
    name,
    age,
    height
}

2）函数的增强写法

const obj = {
    run:function(){

    }，
    eat:function(){

    }
}//ES5写法



const obj = {
    run(){
    },
    eat(){
    }
}//ES6写法

8.v-on的参数传递问题

在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，vue会默认将浏览器产生的event事件对象作为参数传入到方法

<div>
    <button @click = "btn2Clisk">按钮2</button>
</div>
<script>
    methods:{
        btn2Click(event){
            console.log('-----',event)
        }
    }
</script>

方法定义时，我们需要event对象，同事又需要其他参数；

调用方法时，如何手动的获取到浏览器参数的event对象：$event--

<div>
    <button @click = "btn3Click(abc,$evect)">按钮3</button>
</div>
<script>
    methods:{
        btn3Click(abc,event){
            console.log('+++++',abc,event)
        }
    }
</script>

9.v-on的修饰符的使用

.stop-调用event.stopPropagation()//停止冒泡

<div @click = "divClick">
    <button @click.stop = "btnClick">按钮</button>
</div>

<script>
    methods:
        btnClick(){
            console.log("btnClick");
        }
        divClick(){

            console.log("divClick");
        }
</script>

.prevent-调用event.preventDefault()//阻止默认行为

<form id = "baidu">
    <input type = "submit" value = "提交" @click.prevent = "submitClick">
</form>

<script>
    methods:
        btnClick(){
            console.log("btnClick");
        }
       
</script>

.{keyCode|keyAlias}-只当事件是从特定键出发时才出发回调

<input type = "text" @keyup.enter = "keyup">

<script>
    methods:
        keyup(){
            console.log("keyup")
        }
</script>

.native-监听组件根元素的原生事件

.once-只出发一次回调

<div >
    <button @click.once = "btnClick">按钮</button>
</div>

<script>
    methods:
        btnClick(){
            console.log("btnClick");
        }
</script>

10.v-if和v-else的使用

11.登录切换的小案例

注：过程可能会遇到一个小问题，当处于用户账号界面时，已经输入账号，点击切换类型后已经输入的账号不会被清空。原因是虚拟DOM中存在label和input中的type、id、placeholder属性，点击切换类型后，会对已经在虚拟DOM中讯在的属性进行复用。解决办法增加key属性，并给两个input赋不同的值。

12.v-if和v-show的区别

使用v-if，条件为false时，包含v-if的元素在dom中不存在

使用v-show，条件为false时，元素多了一个行内样式display:none

开发中如何选择？

只切换一次使用v-if；

切换频率高，频繁在显示与隐藏中跳转选择v-show

13.v-for遍历数组、遍历对象

<ul>
    <li v-for = "item in names">{{item}}</li>
</ul>
data:
    names:['Sihan','SS','YY']

<ul>
    <li v-for = "item in info">{{item}}</li>
</ul>
<ul>
    <li v-for = "(key,value) in info">{{key}}-{{value}}</li>
</ul>
<ul>
    <li v-for = "(key,value,index) in info">{{key}}-{{value}}-{{index}}</li>
</ul>
data:
    info:{
        name:Sihan,
        age:23,
        height:170
    }

使用v-for时尽量去绑定一个key值，保证其唯一性。在数组中间插入一个值，key给每个节点一个标识，diff算法可以迅速识别定位直接插入，具有高效性。总而言之，key的作用是为了高效的更新虚拟DOM