vue.js学习(二)

╰+哭是因爲堅強的太久メ 2021-11-23 14:50 251阅读 0赞

## 1.条件语句 ##

v-if v-else-if v-else

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.js条件语句</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h2 v-if="seen" v-html="message"></h2>
            <template v-if="seen">
                <p v-html="message1"></p>
                <p v-html="message2"></p>
            </template>
    
        </div>
        <div id="app1">
            <h2 v-html="message"></h2>
            <div v-if="type==A">
                <p v-html="A"></p>
            </div>
            <div v-else-if="type==B">
                <p v-html="B"></p>
            </div>
            <div v-else-if="type==C">
                <p v-html="C"></p>
            </div>
            <div v-else>
                <p v-html="other"></p>
            </div>
        </div>
        <div id="app2">
            <h2 v-show="seen" v-html="message"></h2>
        </div>
        <script type="text/javascript">
            var vm1=new Vue({
              el:"#app",
              data:{
                message:"v-if",
                message1:"Hello",
                message2:"Hi",
                seen:true,
              }
            })
        </script>
        <script>
            var vm2=new Vue({
              el:"#app1",
              data:{
                message:"v-else v-else-if",
                type:'DDD',
                A:'A',
                B:'B',
                C:'C',
                other:"其他",
              }
            })
        </script>
        <script type="text/javascript">
            var vm3=new Vue({
              el:"#app2",
              data:{
                message:"v-show",
                seen:true,
              }
            })
        </script>
    
    
    
    </body>
    </html>

## 2.循环 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>循环</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app1">
            <h1 v-html="message"></h1>
            <h2 v-html="message1"></h2>
            <ol v-for="site in sites">
                <li>{
       {site.name}}</li>
            </ol>
        </div>
        <div id="app2">
            <h2 v-html="message"></h2>
            <ul>
                <template v-for="site in sites">
                    <li>{
       {site.name}}</li>
                </template>
            </ul>
    
        </div>
        <div id="app3">
            <h2 v-html="message"></h2>
            <ul >
                <li v-for="(value,key,index) in object">{
       {index}}.{
       {key}}:{
       {value}}</li>
            </ul>
        </div>
        <div id="app4">
            <h2 v-html="message"></h2>
            <ul>
                <li v-for="n in m">{
       {n}}</li>
            </ul>
        </div>
        <div id="app5">
            <h2 v-html="message"></h2>
            <ul v-for="user in users">
                <li v-for="(value,key,index) in user">{
       {index}},{
       {key}}:{
       {value}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var vm1=new Vue({
              el:"#app1",
              data:{
                message:"循环语句",
                message1:"v-for",
                sites:[
                  {'name':'Runoob.com'},
                  {'name':'baidu.com'},
                  {'name':'tengxun.com'},
    
                ]
    
              }
            })
        </script>
        <script type="text/javascript">
            var vm2=new Vue({
              el:"#app2",
              data:{
                message:"在模板中使用v-for",
                sites:[
                  {'name':'Runoob.com'},
                  {'name':'baidu.com'},
                  {'name':'tengxun.com'},
    
                ]
              }
            })
        </script>
        <script type="text/javascript">
            var vm3=new Vue({
              el:"#app3",
              data:{
                message:"迭代对象",
                object:{
                  name:"张三",
                  age:14,
                  sex:'男',
                }
              }
            })
        </script>
        <script type="text/javascript">
            var vm4=new Vue({
              el:"#app4",
              data:{
                message:"迭代整数",
                m:10,
              }
            })
        </script>
        <script type="text/javascript">
            var vm5=new Vue({
              el:"#app5",
              data:{
                message:"迭代对象数组",
                users:[
                  { name:"张三",
                    age:14,
                    sex:'男'},
                  { name:"李四",
                    age:13,
                    sex:'男'},
                  { name:"宋莉",
                    age:13,
                    sex:'女'},
    
                ]
              }
            })
        </script>
    
    </body>
    </html>

## 3.计算属性 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app1">
            <h1 v-html="message"></h1>
            <h2 v-html="message1"></h2>
            {
       {message2.split('').reverse().join('')}}
        </div>
        <div id="app2">
            <h2 v-html="message"></h2>
            <p v-html="message1"></p>
            <p v-html="reverseStr"></p>
            <p v-html="reverseStr2()"></p>
    
        </div>
    
        <div id="app4">
            <h2 v-html="message"></h2>
            <p v-html="counter"></p>
            <button @click="counter++" v-html="message2"></button>
    
        </div>
        <div id="app5">
            <h2 v-html="message"></h2>
            <label v-html="km"></label><input v-model="kilometers" >
            <label v-html="m"></label><input v-model="meters" >
            <p id="info"></p>
            <p id="info1"></p>
        </div>
        <div id="app3">
            <h2 v-html="message"></h2>
        </div>
    
        <script type="text/javascript">
            var vm1=new Vue({
              el:"#app1",
              data:{
                message:"Vue.js 计算属性",
                message1:"反转字符串-1",
                message2:"Baidu"
              }
            })
        </script>
        <script type="text/javascript">
            var vm2=new Vue({
              el:"#app2",
              data:{
                message:"computed",
                message1:"baidu",
    
    
              },
              computed:{
                reverseStr:function () {
                  return this.message1.split('').reverse().join('')
                }
              },
              methods:{
                reverseStr2:function () {
                  return this.message1.split('').reverse().join('')
                }
              }
    
            })
        </script>
        <script type="text/javascript">
            var vm3=new Vue({
              el:"#app3",
              data:{
                message:"computed setter",
                name:"Google",
                url:"https://google.com",
    
              },
              computed:{
                site:{
                  get:function () {
                    return this.name+' '+this.url;
                  },
                  set:function (value) {
                    var names=value.split(' ')
                    this.name=names[0]
                    this.url=names[names.length-1]
                  }
                }
    
              }
            })
    
             vm3.site="facebook http://www.facebook.com/";
            document.write(vm3.name+"<br/>")
            document.write(vm3.url)
        </script>
        <script type="text/javascript">
            var vm4=new Vue({
              el:"#app4",
              data:{
                message:"监听",
                counter:1,
                message2:"点我",
              }
            })
            vm4.$watch('counter',function (nval,oval) {
              alert('计数器的值从'+oval+'变成了'+nval)
            })
        </script>
        <script type="text/javascript">
            var vm5=new Vue({
              el:"#app5",
              data:{
                kilometers : 0,
                meters:0,
                km:'km',
                m:'m',
                message:'千米和米的换算'
              },
              watch:{
                kilometers:  function (val) {
                  this.kilometers=val
                  this.meters=this.kilometers*1000
    
                },
                meters:function (val) {
                  this.kilometers=val/1000
                  this.meters=val
    
                }
              }
    
            })
            vm5.$watch('kilometers',function (newValue,oldValue) {
              document.getElementById('info').innerHTML= "修改前值为: " + oldValue+ "km，修改后值为: " + newValue+'km';
    
            })
            vm5.$watch('meters',function (newValue,oldValue) {
              document.getElementById('info1').innerHTML= "修改前值为: " + oldValue+ "m，修改后值为: " + newValue+'m';
    
            })
        </script>
    
    </body>
    </html>

## 4.样式绑定 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.js样式绑定</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <style type="text/css">
        .active{
            width:100px;
            height: 100px;
            background-color: aqua;
        }
        .base{
            width: 100px;
            height: 100px;
        }
        .active1{
            background-color: black;
        }
        .text-danger{
            background-color: red;
        }
    
    
    </style>
    <body>
        <div id="app1">
            <div v-bind:class="{active:isActive,'text-danger':isDanger}"></div>
            <button  @click="isActive=false">隐藏绿色</button>
            <button  @click="isActive=true">显示绿色<</button>
            <button  @click="isDanger=false">隐藏红色</button>
            <button  @click="isDanger=true">显示红色</button>
        </div>
        <div id="app2">
            <div v-bind:class="classObject"></div>
        </div>
        <div id="app3">
            <div v-bind:class="object"></div>
        </div>
        <div id="app4">
            <div v-bind:class="[activeClass,errorClass]"></div>
        </div>
        <div id="app5">
            <div v-bind:class="[errorClass,isActive?activeClass:'']"></div>
        </div>
        <div id="app6">
            <p v-bind:style="{fontSize:fontSize+'px',color:color1}" v-html="message"></p>
        </div>
        <div id="app7">
            <p v-bind:style="object" v-html="message"></p>
        </div>
        <div id="app8">
            <p v-bind:style="[style1,style2]" v-html="message"></p>
        </div>
        <script type="text/javascript">
            var vm1=new Vue({
              el:"#app1",
              data:{
                isActive:true,
                isDanger:true,
              }
            })
    
    
    
        </script>
        <script type="text/javascript">
            var vm2=new Vue({
              el:"#app2",
              data:{
                classObject:{
                  'active':true,
                  'text-danger':true,
                },
    
              }
            })
        </script>
        <script type="text/javascript">
            var vm3=new Vue({
              el:"#app3",
              data:{
                isTrue:true,
                isActive:true,
                error:{
                  value:false,
                  type:"fatal"
                }
              },
              computed:{
                object:function () {
                  return {
                    base:this.isTrue,
                    active1:this.isActive&&!this.error.value,
                    'text-danger':this.error.value&&this.error.type==='fatal'
    
                  }
    
                }
              }
            })
        </script>
        <script type="text/javascript">
            var vm4=new Vue({
              el:"#app4",
              data:{
                activeClass:'active',
                errorClass:'text-danger',
    
              }
            })
        </script>
        <script type="text/javascript">
            var vm5=new Vue({
              el:"#app5",
              data:{
                isActive:true,
                activeClass:'active',
                errorClass:'text-danger',
              }
            })
        </script>
        <script type="text/javascript">
            var vm6=new Vue({
              el:"#app6",
              data:{
                message:'Hello,Vue',
                color1:'green',
                fontSize:10,
              }
            })
        </script>
        <script type="text/javascript">
            var vm7=new Vue({
              el:"#app7",
              data:{
                message:'Hello,Vue.js',
                object:{
                  color:'yellow',
                  fontSize:'40px',
                }
              }
            })
        </script>
        <script type="text/javascript">
            var vm8=new Vue({
              el:"#app8",
              data:{
                message:'Hello,Vue',
                style1:{
                  color:'orange',
                  fontSize:'100px',
                },
                style2:{
                  backgroundColor:'blue',
                }
              }
            })
        </script>
    
    </body>
    </html>

## 5.事件处理器 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js事件处理器</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app1">
            <h2 v-html="message"></h2>
            <button v-on:click="counter++" v-html="message2"></button>
            <p >这个按钮被点击了{
       {counter}}次</p>
        </div>
        <div id="app2">
            <h2 v-html="message"></h2>
            <button v-on:click="greet" v-html="message1"></button>
        </div>
        <div id="app3">
            <h3 v-html="message"></h3>
            <button v-on:click="say('Hello')" v-html="message1"></button>
            <button v-on:click="say('Hi')" v-html="message2"></button>
        </div>
        <script type="text/javascript">
            var vm1=new Vue({
              el:"#app1",
              data:{
                message:"v-on指令",
                message2:"增加1",
                counter:0,
              }
            })
        </script>
        <script type="text/javascript">
            var vm2=new Vue({
              el:"#app2",
              data:{
                message:"v-on 可以接收一个定义的方法来调用",
                message1:"Greet",
                name:"Vue.js",
    
              },
              methods:{
                greet:function (event) {
                  if(event){
                    alert('Hello'+this.name+'!')
                    alert(event.target.tagName)
    
                  }
    
                }
              }
            })
        </script>
        <script type="text/javascript">
            var vm3=new Vue({
              el:"#app3",
              data:{
                message:"绑定方法，内联javascript语句",
                message1:"sayHello",
                message2:"sayHi"
              },
              methods: {
                say:function (message) {
                  alert(message)
    
                }
              }
            })
        </script>
    </body>
    </html>

## 6.表单 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app1">
            <h2 v-html="message1"></h2>
            <input v-model="message2">
            <p v-html="message2"></p>
            <h2 v-html="message4"></h2>
            <textarea v-model="message3"></textarea>
            <p v-html="message3"></p>
        </div>
        <div id="app2">
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox"  v-html="checked"></label><br>
            <input type="checkbox" id="google" value="google" v-model="checkedNames">
            <label for="google" v-html="google"></label>
    
    
            <input type="checkbox" id="taobao" value="taobao" v-model="checkedNames">
            <label for="taobao" v-html="taobao"></label>
    
            <input type="checkbox" id="tengxun" value="tengxun" v-model="checkedNames">
            <label for="tengxun" v-html="tengxun"></label><br/>
            <span>您选择的值为{
       {checkedNames}}</span>
    
        </div>
        <div id="app3">
            <input type="radio" value="baidu" v-model="picked" id="baidu">
            <label for="baidu" v-html="baidu"></label>
            <input type="radio" value="souhu" v-model="picked" id="souhu">
            <label for="souhu" v-html="souhu"></label><br/>
            <span >您选择的值为{
       {picked}}</span>
    
        </div>
        <div id="app4">
            <select name="website" v-model="selected">
                <option value="">选择一个网站</option>
    
                <option value="https://baidu.com">百度</option>
                <option value="https://google.com">谷歌</option>
            </select>
            <p>您选择的网站是{
       {selected}}</p>
        </div>
        <script type="text/javascript">
            var vm1=new Vue({
              el:"#app1",
              data:{
                message1:"输入框",
                message4:"文本域",
                message2:"输入信息",
                message3:"文本域信息",
              }
            })
        </script>
        <script type="text/javascript">
            var vm2=new Vue({
              el:"#app2",
              data:{
                checked:false,
                google:"google",
                taobao:"taobao",
                tengxun:"tengxun",
    
                checkedNames:[],
    
              }
            })
        </script>
        <script type="text/javascript">
            var vm3=new Vue({
              el:"#app3",
              data:{
                baidu:"baidu",
                souhu:"souhu",
                picked:this.baidu,
    
              }
            })
        </script>
        <script type="text/javascript">
            var vm4=new Vue({
              el:"#app4",
              data:{
                selected:'',
    
              }
            })
        </script>
    
    
    </body>
    </html>