大气企业网站源码曹鹏wordpress
vue为渐进式框架：vmmv
1.易用
有html、css、javascript基础，即可学习vue框架
2.高效、开发前端页面 非常高效
1.vue的体积小、压缩完只需要20k的大小
2.超快的虚拟dom操作js中非常多的dom操作，vue设计虚拟dom非常快
3.设计时vue底层深度优化
3.灵活、开发灵活、多样性
vue的入门开发 ：
1.下载vue.js并引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
vue对象的基础认识：
vue语法极其严格：
空格、标点符号、语法不正确、极小的语法错误都会导致viem视图无法显示
<body>
<div id="#app">
{{msg}} //vue中mvvm的数据形参写法
</div>
</body>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!",
username:"hello Vue!",
pwd :"12345"}
});
</script>
vue中各对象获取参数的写法：
<body>
<div id="app">//对象数据
<h4>{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}</h4>
<h4>//数组数据
{{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}}
</h4>
<h4>//集合对象
{{users[0].id}}--{{users[0].name}}--{{users[0].age}}--
{{users[0].sex}}-- {{users[0].salary}}
</h4>
<h4>
{{users[1].id}}--{{users[1].name}}--{{users[1].age}}--
{{users[1].sex}}-- {{users[1].salary}}
</h4>
<h4>
{{users[2].id}}--{{users[2].name}}--{{users[2].age}}--
{{users[2].sex}}-- {{users[2].salary}}
</h4>
</div>
</body>
</html><script>
//创建vue实例
new Vue({
el:"#app",
data:{
user:{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
hobbies:["吃饭","喝水","睡觉","游山","玩水"],
users:[
{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
{id:2,name:"zhang3",age:22,sex:false,salary:3000.0},
{id:3,name:"li4",age:23,sex:true,salary:4000.0},
]
}
})
</script>
v-text和v-html的使用和区别
<div id="#app">
//获取vue对象中key为msg的value
<h3>{{msg}}</h3>
//在标签内获取vue对象中key为msg的value值，直接获取内部文本信息
<h4 v-text="msg"></h4>
//在标签内获取vue对象中key为content的value值，但是如果值中有html标签则可以解析html标签中的信息，输出其中的样式和内容
<h4 v-text="content"></h4>
</div>
vue中的绑定事件
事件的三要素：事件源、事件、监听器
1.事件源：发生特定动作的html
2.事件：发生特定动作 单击事件、双击事件、鼠标移出移入等
3.监听器：当标签上发生特定事件时处理的程序一般在js中称为事件处理函数
vue中绑定事件基本语法,事件处理函数的写法
<div id="app">
//js中事件的写法为：οnclick="method()"，vue中双向绑定的写法为：v-on:事件 名 ="function()"，可省略为@事件名v-on:click="clickMethod"等同于@click="clickMethod",且如果方法没有形参列表，可省略扩号
<button v-on:click="clickMethod"></button>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!",
username:"hello Vue!",
pwd :"12345",
content:"<h4 stely='color:red'>内容</h4>"
}，
methods:{
"clickMethod":{ //在methods中定义事件所需要的方法
}
});
</script>
this的使用
<div id="app">
<h4> {{msg}}</h4>
<button @click="clickMethod">单击事件</button>
<button @dbclick="dbclickMethod("名字想好了")">双击事件</button>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!"，
username:"名字没想好"
}，
methods:{
clickMethod(username){ //在methods中定义事件所需要的方法
this.msg="改变后的数据"；//通过this可调用data中双向绑定的数据
this.username=username;
},
dbclickMethod(username){ //通过this可调用methods中的方法
this.clickMethod(username);
}
}
});
</script>
v-show和v-if、v-bind的使用
v-show 底层通过先创建此标签然后控制标签css样式的display属性实现页面原始展示或隐藏
v-if 底层通过控制dom树的元素节点实现（增删改查操作）页面元素展示或隐藏
v-show和v-if的选择：
v-show：有更高的初始渲染，通过css样式的display实现隐藏，需要频繁切换，则使用
v-if：有更高的切换消耗，通过删除、添加dom元素，运行时条件很少改变，则使用v-if
v-bind可操作标签中的css样式属性，例：
//v-bind
<img v-bind:width="width" v-bind:height="height" v-bind:src="src" @mouseover="changeImage1" @mouseout="changeImage2"/>
'<script>
//创建vue实例
let app = new Vue({
el:"#app", //用来指定vue实例的作用范围
data:{//用来给vue实例绑定数据
msg:"hello ", //虽然还是写死的路径 但是根据双向绑定的原理 将来通过修改属性的值改变图片路径
src:"images/1.jpg",
width:170,
height:200
}
})
v-for的使用
v-for遍历对象:
<标签名 v-for="(value,key,index) in vue实例的data属性中的哪个变量"></标签名>
<span v-for="(value,key,index) in user">
{{index}}--{{key}}--{{value}}<br/>
</span>
v-for遍历数组:
标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">
<ul>
<li v-for="(item,index) in hobbies">{{index+1}}-{{item}}</li>
</ul>
v-for遍历集合:
标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">
<table border="1px" cellspacing="0" width="100%">
<tr align="center">
<td>序号</td>
<td>编号</td>
<td>名字</td>
<td>年龄</td>
<td>工资</td>
<td>操作</td>
</tr>
//集合对象的遍历需要:key便于vue内部做重用和排序
<tr v-for="(user,index) in users" :key="user.id" align="center">
<td>{{index+1}}</td>
<td>{{user.id}} </td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.salary}}</td>
<td><a href="">删除</a>|<a href="">修改</a></td>
</tr>
</table>