前端开发之VUE介绍与使用 _VUE

一、Vue介绍1、什么是Vue
可以独立完成前后端分离式web项目的JAVAScript框架
2、学习Vue的原因三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
3、Vue的特点单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
二、Vue使用一2.1 第一个Vue页面与事件<div id="App">
<h1>{{ msg }}</h1>
<h2 v-on:click="clickAction">这是一条内容</h2>
<h2 v-on:mouseover="clickAction">这是一条内容</h2>
</div>
<script src=https://www.isolves.com/it/cxkf/bk/2021-10-22/"js/vue.js">
<script>
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!'
},
methods:{
clickAction:function () {
alert('123123')
}
}
})
</script>

文章插图
2.2 Vue操作样式与文本操作<div id="app">
<p v-on:click="btnClick" v-bind:style="v_style"> 点击变换文字颜色1</p>
<p v-on:click="btnClick" v-bind:style="v_style"> 点击变换文字颜色2</p>
<p v-on:click="changeword">{{ msg1 }}</p>
<p v-on:click="changeWord" v-once="msg1">{{ msg1 }}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!',
msg1:' 点击变换文字颜色3',
msg2: '其实是偷偷给你换了字！',
v_style:{
color:'green'
}
},
methods:{
btnClick:function () {
if (this.v_style.color == 'green'){
this.v_style.color = 'red';
}else{
this.v_style.color = 'green';
}
},
changeWord:function () {
this.msg1 = this.msg2;
}
},
});
</script>

文章插图
2.3 Vue事件指令<div id="app">
<p v-on:click="eventAction1" v-bind:style="v_style">{{ msg[0] }}</p>
<p @click="eventAction2">{{ msg[1] }}</p>
<ul>
<li @click="liAction(100)">第一个li</li>
<li @click="liAction(200)">第二个li</li>
<li @click="liAction(300)">第三个li</li>
</ul>

<div @click="func1">function1</div>

<div @click="func2">function2</div>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: ['这是msg里面的第一个值', '这是msg里面的第二个值'],
v_style:{
color:'green',
}
},
methods:{
eventAction1:function () {
console.log('this is eventAction1');
},
eventAction2:function () {
console.log('this is eventAction2');
},
liAction: function (num, msg) {
console.log(num, msg)
},
func1: function (ev) {
console.log(ev)
},
func2: function (ev, msg) {
console.log(ev);
console.log(msg)
}
},
});
</script>

文章插图
2.4 属性指令<div id="app">


<p class="" style="" v-bind:theFirst="F" :theSecond="S">1</p>

<p :class="c1" @click="action1">2</p>

<p :class="[c1,c2]">3</p>

<p :class="[c1, 'br']">4</p>


<p class="gDiv" :style="s1"> 这是测试style属性 </p>