12-18前端Vue笔记

序言：核心还是后端开发------->web开发----->重点在：网页渲染，数据交互，表单验证

补充：UI框架(css bootstrop-jquery element-vue) 数据显示框架(vue react angular) 获取数据(ajax axios) 服务器架构(nodeJS python服务器 mysql )

1案例：tab重做

1. 步骤：确定盒子，按钮绑定事件，数据改变，盒子改变

2. Vue改写：1-选择最大的盒子 2-数据控制 3-class的条件表达式

3. var tab_con = new Vue({
       el:\'.tab_con\',
       data:{
           num:0
       },
       methods:{
           
       }
   })
   <input type=\"button\" @click=\"num=0\" :class=\"[(num==0)?\'active\':\'\']\"></input>
   <div :class=\"[(num==0)?\'current\':\'\']\"></div>
   
   

2.Vue控制style----格式 :style=“字典，对象，列表”

1. 以字典，对象，列表(多个对象的引用)形式

   ---行内式css  style=\"color:red font-size:20px\"---
   <div class=\"box\">
   </div>
       var my_vue = new Vue({
           el:\".box\",
           data:{
               mycolor:\"red\",
               myfontsize:\"20px\",
               myobj1:{
                   color:\"green\",
                   fontSize:\"20px\"
               },
               myobj2:{
                   background:\"blue\"
               }
           }
       })
   
   

3.条件渲染------->控制标签的显示与隐藏

1. bool型–控制条件 v-if=“false” 删除标签隐藏

2. v-if v-else 与多重渲染 v-if v-else v-else-if

3. v-show=\"true\"显示 v-show=\"false\"隐藏---->style=“display:none” 只能控制一个标签

4. var myVue = new Vue({
       el:\"\",
       data:{
           bool1:true,
           bool2:false,
           type:\"a\"
       }
       
   })
   <div v-if=\"bool1\">v-if</div>
   <div v-else>v-else</div>
   -----多重控制------
   <div v-if=\"type==\'a\'\">v-if</div>
   <div v-else-if=\"type==\'b\'\">v-else</div>
   <div v-else>v-else</div>
   
   
   

4.列表渲染和对象渲染==>循环增加标签显示迭代内容

1. v-for=“临时变量 in 序列” v-for=\"(临时变量1,临时变量2) in 序列\" 变量1=数据 变量2=下标

2. 对象中只有一个变量=value或变量1=value 变量2=key

3. 临时变量只在当前标签内部使用

4. var myvue = new Vue({
       el:\"\",
       data:{
           lst1:[1,2,3,4,5],
           obj:{\"name\":\"laowang\",\"age\":50}
       }
   })
   <li v-for=\"i in lst1\">{{i}}</li>
   <li v-for=\"(i,j) in obj\">value{{i}}key{{j}}</li>
   

5.获取表单数据

1. v-model=“变量”---->将表单内的value值传递个data内的变量

2. 数据是双向绑定的，标签内value<=====>data内变量

3. 单项:数据改变==>页面改变 双向: 在表单元素中 数据改变<==>页面改变

4. var myvue = new Vue({
       el:\"\",
       data:{
           myval:\"\",
           myopt:0
       }
   })
   <input type=\"text\" v-model=\"myval\">
   <p>{{myval}}</p>
   <select v-model=\"myopt\">
       <option value=0>111</option>
       <option value=1>222</option>
       <option value=2>333</option>
   </select>
   
   

5. 案例：单选和复选练习

6.案例：聊天页面

1. 列表套字典存储数据{person:A,sentence:“ni hao”}

2. 获取a说value 和 对话的value

3. v-for显示对话内容 :class控制显示风格

4. 点击绑定增加数据内容

5. var myvue = new Vue({
       el:\"\",
       data:{
           lst1:[],
           person1:0,
       	sentence1:\"\"
       },
       methods:{
           fnSay:function(){
               var person2 = [this.person1?\'B\':\'A\'];
               this.lst1.push({person:person2,sentence:this.sentence1});
           }
       }
       
   })
   <li v-for=\"i in lst1\" :class=\"[person1?\'B\':\'A\']\">{{i.person}}:{{i.sentence}}</li>
   

7.案例

TODO–list

1. 确定v-for显示的列表
2. 确定显示的列表数据
3. 增加列表，列表的数据来源value
4. 删除列表
5. 移动列表内的数据排序

8.生命周期

1. Vue对象创建过程中的钩子函数

2. 搭建空架构—填充内容—绑定控制标签 数据，方法----mounted

3. 重点在mounted,Vue对象在标签生效后，相当于第一个执行的函数，用来获取数据和显示数据

4. mounted:function(){
       axios({
           url:\"\",-------链接路径
           method:\"get/post\",
       }).then(function(data){
           在这里this指向window,使用对象直接使用对象名
       }).catch(function(err){
           console.log(err)
       })
   }
   

9.axios取数据案例：

1. 确定循环的数据，循环显示的标签行

2. 通过axios获取数据 将数据加入Vue的data中

3. 查看获取过来的数据

4. var vm = new Vue({
       el:\"\",
       data:{
           lst:[]
       },
       methods:{
           
       },
       mounted:function(){
           _this = this; 
           axios({
               url:\"/index_data\",
               method:\"get\"
           }).then(function(data){
               console.log(data);
               vm.lst = data.data;
               或者 _this.lst = data.data
           })
       }
   })
   
   <tr v-for=\"i for i in lst\"></tr>