Vue.js前端框架技术心得体会

_棠梨

已于 2023-12-11 22:56:35 修改

阅读量79

点赞数

文章标签：前端框架 vue.js

于 2023-12-11 22:41:14 首次发布

本文链接：https://blog.csdn.net/m0_74220452/article/details/134937942

版权

一、什么是vue框架？

vue是一套用于构建用户界面的渐进式框架。

提供了一套开发规则，按照这个开发规则可提高开发效率。

vue官网：https://cn.vuejs.org/

二、安装vue框架

（1）本地安装，下载vue.js文件到本地，进行引用

（2）cdn安装，引用<script>src"https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

三、如何使用vue？

新建项目新建文件夹，新建js文件夹，将本地的vue.js放入js文件夹。

引用本地js文件<script src="../js/vue.js"></script>

首先要new一个vue

el是挂载，也就是要操作的内容。这里操作的是一个“app”。

data是数据模型，值是一个对象。

methods是函数块的包装盒，里面包含多个函数,函数也可以传参。

<div id="app">
<span v-text="msg"></span>
<button @click="change">按钮</button>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
msg:'欢迎使用Vue'
},
methods:{
// change:function (){} 两种作用一致
change(){
this.msg = '12345';
}
},
computed:{}
});
</script>
四、vue指令的使用

4.1、v-text指令

用于操作纯文本

显示对应的数据对象上的值

数据对象上的值发生改变，插值处的内容也会随之更新

4.1代码代码演示

网页上的显示也就是：data中msg的值

4.2 、 v-on指令

v-on指令用于事件和vue实例方法之间的绑定，用法v-on:事件名="方法名()"，没有参数时方法名后面（）可以省略。可以用@代替。

@click

@click，是单击事件

@ click = “”，“里面写方法名”

4.1代码演示，方法里对msg赋值，msg插值处也改变。变成12345.

@ click = “”，“里面写方法名”方法名里面参数带单引号'’，表示是一个字符串常量。

@ click = “”，“里面写方法名”方法名里面参数不带单引号，表示是一个变量。

@ click = “”，“里面写方法名”方法名里面参数不带单引号，写数字，也可以

代码展示

<div id="app">
<button v-on:click="showMsg('tom')">按钮1</button>
<button v-on:click="showMsg(name)">按钮2</button>
<button v-on:click="showMsg(666)">按钮3</button>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
name:'alice'
},
methods:{
showMsg(param){
alert(param);
}
}
})

</script>

由于弹窗，没有效果截图展示。输出结果为 tom alice 666

4.3、v-html指令

这个指令，可以msg里写html标签，能直接识别出来这个标签

<div id="app">
<div v-text="msg"></div>
<div v-html="msg"></div>
<a v-bind:title="biaoTi" :href="url">这是有个超链接</a >
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
msg:'<h3>今天周二</h3>',
biaoTi:'广州蜗牛',
url:'https://www.woniuxy.com'
}
})
</script>

通过代码演示，它可以识别HTML标签。

4.4、v-bind:title指令

v-bind动态绑定，这里绑定title。

如4.3演示代码、图片。这是一个超链接和链接绑定。点击这是一个超链接就是点击链接。

4.5、v-on指令绑定class

演示为绑定class后设置按钮颜色

代码及演示在4.6

4.6、v-on指令绑定@mouseover

@mouseover 鼠标悬停事件

演示为设置两种颜色

通过三目运算符，鼠标悬停时切换颜色。

</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
myClass:'clz_b'
},
methods:{
changeClass(){
this.myClass = (this.myClass == 'clz_a'? 'clz_b':'clz_a');
}
}
})
</script>
运行时按钮为粉色，鼠标悬停后，变为黄色。

我们希望当鼠标悬停时改变样式，不悬停时没有样式，那就这样做。

只设置一个样式，初始值为空不设样式

然后通过三目运算符改变样式。

代码演示

</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
myClass:''
},
methods:{
changeClass(){
this.myClass = (this.myClass == ''? 'clz_a':'');
}
}
})
</script>
4.7、@ click.stop：阻止事件冒泡

<button @click.stop.once="method1().enter">按钮2</button>
<input type="text" placeholder="回车试试" @keydown.enter="method4()">
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
btnText:'隐藏',
flag:true,
},
methods:{
changeDisplay(){
this.flag = !this.flag
this.btnText = this.flag? '隐藏':'显示';
},

method1(){
alert('button被点击了')
},
method2(){
alert('div被点击了')
},
method3(){
alert('超链接被点击了')
},
method4(){
location.href='https://www.woniuxy.com';
},
}
})

通过代码，当点击button事件时，div事件也会被点击。加上.stop后，就可以阻止冒泡，只执行button。

@ click.prevent：阻止事件的默认行为

通过代码，当点击超链接事件时，会跳转，加上.prevent后，就可以阻止事件的默认行为，不会跳转。

@ click.once

只执行一次。点击一次事件后，再次点击，就不会执行了。

4.8、@keydown：键盘事件

@keydown.enter 通过这个事件，可以键盘回车调用方法。

代码演示4.7，回车调用methods4（）。

4.9、v-show指令

v-show指令， true的时候显示，false的时候隐藏。

v-show指令是根据条件显示DOM元素的指令，可以用来动态控制DOM元素的显示和隐藏

当我们点击按钮，要显示事件的内容为true时，点击button为隐藏

要显示事件的内容为false时，点击button为显示。

通过三目运算符来实现。

演示为4.7changeDisplay()方法。

4.10、v-model 双向绑定指令

在表单输入元素或组件上创建双向绑定

会根据控件类型自动选取正确的方法来更新元素。

负责监听用户的输入事件来更新数据

代码演示

<div id="app">
<span v-text="info"></span>
<input type="text" v-model="info"/>
<input type="text" v-model="info"/>
<p>
<button @click="change()">按钮</button>
</p >
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
info:'aa'
},
methods:{
change(){
this.info = this.info +'-'
}
}
})
</script>

4.11、v-if和v-else

v-else必须要和v-if匹配使用，v-else不能单独使用。

只有v-if的值为false时，v-else模块才会显示出来。

插值表达式双大括号{{}}

代码演示

body>
<div id="app">
<input v-text="age" v-model="age"/>
<br>
{{age}}岁是<span v-if="age>=18">成年人</span><span v-else>未成年人</span>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
age:''
},
methods:{

}
})
</script>
效果演示

4.12、v-for指令

1）v-for指令是基于一个数组来重复渲染的元素，通常用于显示列表和表格数据。每项提供一个唯一的key属性。

2) 遍历一个对象的属性

3）迭代数据语法 item in items 例如v-for="(stu,index) in stus" :key="index"

代码演示如下：

4.12、v-for指令

1）v-for指令是基于一个数组来重复渲染的元素，通常用于显示列表和表格数据。每项提供一个唯一的key属性。

2) 遍历一个对象的属性

3）迭代数据语法 item in items 例如v-for="(stu,index) in stus" :key="index"

代码演示如下：

<div id="app">
<ul>
<li v-for="(stu,index) in stus" :key="index" :value="stu.stuNo" v-text="stu.stuName"></li>
</ul>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
names:[
'张三丰','梅超风','李莫愁','张无忌'
],
stus:[
{stuNo:11,stuName:'张三'},
{stuNo:12,stuName:'李四'},
{stuNo:13,stuName:'王五'},
{stuNo:14,stuName:'赵六'},
]
},
methods:{