2024年最新vue技术栈--》从vue2，2024年最新学生会面试题目100及最佳答案

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1.2 指令语法

--------



Vue中有很多指令，且形式都是：v-????, 此处以v-bind举例，承接上文做一些修改。



功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）



举例：v-bind:href="x"或简写为 :href="x", x同样要写js表达式且可以直接读取到data中的所有属性

<h1>你好,{{name}}</h1>

<h2>指令语法</h2>

<a v-bind:href="school.url" v-bind:x="hello">点我{{school.hello}}</a>

<a :href="school.url" v-bind:x="hello">点我{{school.hello}}</a>

如代码所示，a标签下的url要引用vue中的数据，需要在href前面加上 v-bind 或 :



2.data和el的2种写法

==============



2.1 el的两种写法

-----------



### 2.1.1 new Vue时候配置el属性

Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示

new Vue({

el:‘#root’,

data:{

    name:''

}

})

### 2.1.2 先创建Vue实例，随后再通过v.$mount('#root')指定el的值。

Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示

const v = new Vue({

data:{

    name:''

}

})

v.mount(‘#root’)

2.2 data的两种写法

-------------



### 2.2.1 对象式

new Vue({

el:'#id',

data:{

    name:''

} 

})

### 2.2.2 函数式

new Vue({

el:'#id',

data:function(){

    return{

        name:''

    }

}

})

**如何选择**：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。子组件中的data必须写成函数式，因为data如果是对象的话，会影响其它组件的数据。



一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。



3.Vue的数据绑定方式

============



3.1 单向数据绑定(v-bind)

------------------



数据只能从data流向页面。譬如以以下代码为例：

单向数据绑定：<input type="text" v-bind:value="name">

打印在网页上为：



![](https://img-blog.csdnimg.cn/5d20c90f0cbe4127b72775fac69a637d.png)在网页hello输入内容刷新依然为hello



在vue插件上保存修改数据，页面上的数据才会改变，所以才叫做单向数据绑定。



![](https://img-blog.csdnimg.cn/d8d4af8e7df243089e881c129ee0a4bb.png)



 3.2 双向数据绑定(v-model)

--------------------



数据不仅能从data流向页面，还可以从页面流向data。

双向数据绑定：<input type="text" v-model:value="name">

ps：1. 双向绑定一般都应用在表单类元素上(如：input、select等)   2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

双向数据绑定：

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】