VUE介绍

VUE

Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要：可以满足专业的制作工作室，同样也能满足3D自由艺术家。

1、模板语法的初步认识

 <div id="app">
         <p>{{ str1 }}</p>
         <p>{{ str1.split("").reverse().join("") }}</p>
         <p>{{num+1}}</p>
         <p>num1和numn2的最大值是：{{ num1>num2 ? num1 : num2 }}</p>
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 str1:"hello",
                 num:20,
                 num1:40,
                 num2:80
            }
        })
     </script>

2、v-bind控制标签属性

 <div id="app">
         <a v-bind:href="bd">百度</a>
         <a :href="tb">淘宝</a>
         <a :href="tb">淘宝</a>
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 bd:"https://www.baidu.com",
                 tb:"https://www.taobao.com"
            }
        })
     </script>

3、v-on事件格式

 <div id="app">
         <p>{{num}}</p>
         <button v-on:click="num+=1">点我数字增加</button>
         <button v-on:click="add">点我数字加5</button>
         <button @click="add2(10)">点我数字加10</button>
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 num: 20
            },
             methods:{
                 add:function(){
                     this.num += 5
                },
                 add2(){
                     this.num += 10
                }
            }
        })
     </script>

4、定义Vue对象基本格式总结

 var vm = new Vue({
         el: "要绑定的标签",
         data: {
             变量名1：值1,
             变量名2：值2,
             变量名3：值3,
             ...
 
        },
         methods: {
             方法名1: function(){
 
            },
             方法名2: function(){
 
            },
             方法名3: function(){
 
            }
        }
    });

5、vue控制类名和style样式(动态控制类名)

 <div id="app">
         <!--控制标签的类名 :class= 的值可以是 js对象 {类名：布尔值} -->
         <div class="box" :class="{box1:bool1, box2:bool2}"></div>
 
         <!--控制标签的类名 :class= 的值可以是 数组 [类名1，类名2] -->
         <div class="box" :class="['box3', 'box4']"></div>
         
         <!--掌握-->
         <div class="box" :class=" bool3 ? 'current':'' "></div><!--通过控制bool3位真还是假，来控制这个盒子有还是没有current这个类-->
         
         
         <div :style="{fontSize:'40px' }">文字</div>
         <div :style="{ fontSize:false?'40px' : '50px'}">文字</div>
         <div :style="[{fontSize:false?'40px' : '50px'},{background:'pink'}]">文字</div>
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 bool1:true,
                 bool2:false,
                 bool3:true
            }
        })
     </script>

6、选项卡案例

 <div class="tab_con" id="app">
         <div class="tab_btns">
             <input type="button" value="按钮一" :class="num==1? 'active':''" @mouseover="num=1">
             <input type="button" value="按钮二" :class="num==2? 'active':''" @mouseover="num=2">
             <input type="button" value="按钮三" :class="num==3? 'active':''" @mouseover="num=3">
         </div>
         <div class="tab_cons">
             <div :class="num==1? 'current':''">按钮一对应的内容</div>
             <div :class="num==2? 'current':''">按钮二对应的内容</div>
             <div :class="num==3? 'current':''">按钮三对应的内容</div>
         </div>
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 num:1
            }
        })
     </script>

七、v-if和v-show指令

v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。

 <div id="app">
         <!-- v-if指令的作用：控制标签是否展示，不展示则删除-->
         <!--<div v-if="bool1">1111111</div>-->
         <!--<div style="display:none">2222222</div>-->
 
         <!--bool1的值为true 第一个盒子被保留，删除第二个盒子，
         为false的话，第2个盒子保留，删除第1个盒子-->
         <!--<div v-if="bool1">11111</div>-->
         <!--<div v-else>222222</div>-->
 
         <!--<div v-if="type=='a'">11111</div>-->
         <!--<div v-else-if="type=='b'">2222</div>-->
         <!--<div v-else-if="type=='c'">3333</div>-->
         <!--<div v-else>4444</div>-->
 
         <!--不会删除标签，根据bool1是true还是false决定盒子是显示还是隐藏(在控制display属性的值)-->
         <div v-show="bool1">v-show的用法</div>
 
 
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 bool1: false,
                 type: "z"
            }
        })
     </script>

点击收藏按钮案例：

 <!-- <button v-if="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button>
         <button v-else @click="collectStatus=!collectStatus">取消收藏</button> -->
 
 <button v-show="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button>
 <button v-show="collectStatus" @click="collectStatus=!collectStatus">取消收藏</button>
 
 <script>
     var vm = new Vue({
         el:".tab_con",
         data:{
             num:1,
             collectStatus:false
        }
    })
 </script>

八、列表和对象的渲染

  <div id="app">
         <ul>
             <!--i是列表中的每一个数据-->
             <li v-for="i in list1">{{ i }}</li>
         </ul>
        <ul>
             <!--i是列表中的每一个数据 j是每一个数据的下标-->
             <li v-for="(i, j) in list1">{{ i }} {{ j }}</li>
         </ul>
 
        <ul>
            <!--i是my_obj对象中的值-->
            <li v-for="i in my_obj">{{i}}</li>
        </ul>
 
        <ul>
            <!--i是my_obj对象中的值 j是my_obj对象中的键名-->
            <li v-for="(i, j) in my_obj">{{i}} {{j}}</li>
        </ul>
 
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list1: ["javascript", "html", "css", "vue", "react"],
                my_obj: {
                    name: "javascript",
                    age: 24
                }
            }
        })
    </script>

九、表单数据绑定

v-model的值是，vue接收表单元素的值的变量名， 即v1的值就是用户填写的内容(甚至可以在data中设置v1的值，从而设置表单元素的默认值)

 <input type="text" v-model="v1">
 <div>{{v1}}</div>

具体代码：

 <div id="app">
         <input type="text" v-model="txt1">  <!-- v-model表示了用户输入的这个数据-->
         <p>{{ txt1 }}</p>
 
         <select v-model="sel1">
             <option value="0">北京</option>
             <option value="1">上海</option>
             <option value="2">广州</option>
         </select>
     </div>
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 //通过改变txt1或者sel1，来使对应的表单元素的v-model的值发生了变化，所以这个表单元素的value就变化了(v-model看成我们之前将的value)
                 txt1: '默认值',
                 sel1: 0
            }
        })
     </script>