1、Vue是什么
Vue: 一套用于构建用户界面的渐进式JavaScript框架 渐进式: vue可以自底向上逐层的应用 如果应用很简单:只需要一个轻量小巧的核心库 如果应用很负责:可以引用各式各样的Vue插件2、Vue的特点
1、采用组件化模式,提高代码复用率,且让代码更好维护。
2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、
3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。
3、Vue的启动命令
1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve
2、首先先需要检测自己是否安装了yarn 命令
yarn命令和npm的区别
1、yarn是从国内下载npm是从国外下载 所以yarn速度效率比较高,npm速度效率比较低
2、yarn -v -- 可以检测到是否有yarn命令
3、没有可以使用npm 安装淘宝镜像就会是国内的了
4、淘宝镜像可以让npm下载速度提升
4、Vue的绑定:
绑定值 给Vue绑定值是通过v-bind: 值
代码演示 比如我vue data中有一个 baidu的参数 值为: www.com.baidu
我要给超链接绑定这个参数 就可以使用v-bind
2. 把参数直接写道标签中 可以使用{{}} 这是被vue经过特殊处理的符号 里面 可以写js的表达式 当然也可以直接写data里面的参数展示 代码演示:<template> <a v-bind:href="baidu"></a> </template> export default { data(){ return{ baidu:"www.baidu.com" } }}<template> <span>{{age}}</span> <span>{{number1+number2===3 ?'对了':'错了'}}<span> </template> let number1=1; let number2=2; export default { data(){ return{ age:12 } }}3. 双向绑定
双向绑定就是一个标签已经绑定了这个参数 而另一个标签也去相同的绑定这个参数
案例: 双向绑定 最典型的案例就是一个input绑定了这个数据 而直接使用参数的标签也拿了这个数据 而input框进行输入的时候相同的修改了参数展示的时候也是展示input中的参数数据了
代码:
<span>{{age}}</span> <input v-model="age"/> data(){ return{ age:1, // baidu:"www.baidu.com", number1:1, number2:2, } }, methods: { add(){ this.number1++ }, remove(){ this.number2-- } } }
4、Vue的V指令使用:
1、
Vue指令 V-on 修饰符
目的：在时间后面修饰符名，给事件带来更强大的功能
语法：事件名"methods函数
.stop:阻止事件冒泡
.prevent:阻止默认行为
.once 程序运行期间,只触发一次事件处理函数
2、
Vue指令 V-model修饰符
目的:让v-medel拥有更强大的功能,
.number 以parseFloat转成数字类型
.trim 去除首尾空白符
.lazy在change时触发而非input时
3、
Vue指令 v-text和v-html
目的 ：更新DOM对象的innerText/innerHTML
语法:v-text="vue数据变量"
v-html="vue数据变量"
注意:会覆盖插值表达式
Vue几种集合使用方法
1 、 在末尾添加一个user对象
首先准备代码结构
return(){ data(){ userList:[{ userId:1, userName:"张三", userage:17 },{ userId:2, userName:"李四", userage:18 },{ userId:1, userName:"王五", userage:21 }] } ,methods:{ removerUserList(){ // 给user集合反转一下 this.userList.reverse(); }, addUserList(){ // 添加一个user对象 let userS=new Object(); userS.userId=this.userList.slice(-1)[0].userId+1; userS.userage=11; userS.username="小明"; userS.userAi="画画"; this.userList.push(userS); }, removeUserList(){ // 删除最后一个user对象 let userId=this.userList.pop(); console.log(userId) }, sayKeySort(){ // 让岁数小的上前面 this.userList.sort((a,b)=>{ return a.userage-b.userage }) }, deleteFormId(userId){ // 根据id删除 console.log("userId:"+userId) let UserIndex=this.userList.findIndex(user=>user.userId==userId) console.log("userIndex"+UserIndex) this.userList.splice(UserIndex,1); } } } }
5、Vue-监听器
Vue监听器: 可以监听data中的对象动作
如data修改了一个数据
案例:
我们去创建一个对象然后去把对象绑定到input框上去然后input框输入了之后就可以改变对象的值,改变了对象的值就可以通过监听器监听、
template中的内容:
<p>obj.lable: {{obj.lable}}</p> <p>obj.lable: <input type="text" v-model="obj.lable"></p>script中的内容:
export default { data() { return { obj: { lable: "哈哈", oldName: 'old name', }, }, watch: { obj: { //监听obj对象如果里面发生了改变则会去输入 newName(代表新的值) handler(newName, oldName) { console.log("数据被修改了改为了:"+newName.lable); }, deep: true, immediate: true } }, };
6、Vue的按键事件
7、Vue的路由跳转
1、 首先导入 router yarn add vue-router
2、main.js中 导入 import router from 'vue-router'
3、建立index.js 会自动扫描
4、导入vue和router Vue.use(router) Vue使用组件
5、导入一个需要跳转的项目
improt 项目名 from '跳转项目的路径'
router/index中代码:
export default new router({ routes:[{ path: '/donationproject', name: "donationproject", component: Dis }, { path: '/addCorss', name: "addCorssdemo", component: addCross }, { path: '/donation/:name/:dept', name: 'Donation', component: donation, props: true }, { path: '/expendkings', component: excelde, }, { path: '/Records/:name/:dept', name: 'records', component: Records, props: true }, { path: '/donationranking', component: donationesc, }, ] });
然后使用就好了
