vue学习笔记1 《Vue.js 前端开发 快速入门与专业应用》

例1 el使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>当前计数器：{{counter}}</h1>
            <button v-on:click='add'>+</button>
            <button @click='sub'>-</button>
        </div>
        
    </body>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                counter:0
            },
            methods:{
                add:function(){
                    this.counter = this.counter+3
                },
                sub:function(){
                    this.counter--
                }
            }
        })
    </script>
</html>
View Code

例2 template使用

    <body>
        <div id="app">
            <p>
                被替代
            </p>
        </div>
        <script id="tpl" type="x-template">
            <div class='tpl'>
                　　 
                <p>
                    我来了
                </p>
            </div>
        </script>
        <script type="text/javascript">
            var vm = new Vue({
            　　 el : '#app',
            　　 template : '#tpl'
             });
        </script>
    </body>
View Code

例3 data使用

<body>
    <div id="app">
        <p>
            {{a}}
        </p>
        <p>
            {{b}}
        </p>
    </div>
    </script>
    <script type="text/javascript">
    var vm = new Vue({
        el : '#app',
        data : {
                a : 1,
                b:3
                }
        });
    vm.$data.b = 2;
    </script>
</body>
View Code

在初始化的时候，把所有的变量都设定好，如果没有值，也可以用undefined 或 null 占位。否则会报错

 例4 props使用

    <body>
        <div id="app">
            <my-component title='myTitle' content='myContent'></my-component>
        </div>
        <script type="text/javascript">
            
        var MyComponent = Vue.component('my-component', {
            props : ['title', 'content'],
            data : function() {
            　　 return {
                 desc : '123'
            　　 }
             },
            template : '<div><h1>{{title}}</h1> <p>{{content}}</p> <p>{{desc}}</p>  </div>'
            })
            
            var vm = new Vue({
              el: '#app',
              data: {
                   
              } 
            })
        </script>
    </body>
View Code

  例5 过滤器

   <body >
        <div id='app'>
            {{message |  uppercase }}
        </div>
    </body>
    
    <script type="text/javascript">
        var myVue = new Vue({
            el: "#app",
            data: {
                message: "Vue"
            },
            // 过滤器
            filters:{
                 uppercase :function(value){
                    return value.toUpperCase()
                }
            }
        })
    </script>
View Code

转化为大写

例6  Setter （价格显示）

    <body >
        <div id='app'>
            &yen{{price }}
        </div>
    </body>
    
    <script type="text/javascript">
        var myVue = new Vue({
            el: "#app",
            data: {
                cents: 100
            },
            computed:{
                price:{
                    set:function(newValue){
                        this.cents = newValue *100
                    },
                    get:function(){
                        return (this.cents/100).toFixed(2)
                    }
                }
            }
        })
    </script>
View Code

后台一般会保存整数，比如￥1会保存为100

此时更改 price = 2，.cents 会被更新为 200，在传递给后端时无需再手动转化一遍

例7  表单的双向数据绑定

    <body >
        <div id='app'>
            <div>text：
                <input type='text' v-model='message'>
                <span>you input is:{{message}}</span>
            </div>
            <div>radio：
                <label><input type="radio" value="male" v-model="gender "> 男 </lable>
                <label><input type="radio" value="female" v-model="gender "> 女 </lable>
                <span>{{ gender }}</span>
            </div>
            <div>
                checkbox：
                <input type="checkbox" v-model="checked_1" />
                <span>{{ checked_1 }} </span>
                单个勾选框，value为布尔值，此时 input 的 value 并不影响 v-model 的值
            </div>
            <div>
                checkbox多选：
                <label><input type="checkbox" value="1" v-model=" checked_2">1</lable>
                <label><input type="checkbox" value="2" v-model=" checked_2">2</lable>
                <label><input type="checkbox" value="3" v-model=" checked_2">3</lable>
                <span>{{ checked_2.join('|') }}</span>
            </div>
            <div>
                select：
                <select v-model="selected" >
                    <option v-for='city in cities'>{{ city.text }}</option>
                </select>
                <br>
                <span> {{ selected }}</span>
            </div>
        </div>
    </body>
    
    <script type="text/javascript">
        var myVue = new Vue({
            el: "#app",
            data: {
                message: '',
                gender : '',
                checked_1 : '',
                checked_2 : [],
                selected : '',
                cities: [
                {text: '西安', value: '西安'}, 
                {text: '洛阳', value: '洛阳'}, 
                {text: '南京', value: '南京'}, 
                {text: '北京', value: '北京'}
                ],
            }
        })
    </script>
View Code

 例8  样式绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js">
        </script>
        <style>
            .active {
                width: 100px;
                height: 100px;
                background: green;
            }
            .unactive{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body >
        <div id='app'>
            <div class="tab" v-bind:class="{'active' : active , 'unactive' : !active}">
                
            </div>
        </div>
    </body>
    
    <script type="text/javascript">
        var myVue = new Vue({
            el: "#app",
            data: {
               active:false
            }
        })
    </script>
</html>
View Code

 例9 Vue-给对象新增属性

    <body >
        <div id='app'>
            <div v-for="item in items">
                {{item.title}}
            </div>
            
            
        </div>
    </body>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                items : [
                    　　　 { title : 'title-1', description : 'description-1'},
                    　　　 { title : 'title-2', description : 'description-2'},
                    　　　 { title : 'title-3', description : 'description-3'},
                    　　　 { title : 'title-4', description : 'description-4'}
                    　　 ]
            }
        })
    </script>
View Code

Vue.set(vm.items[0], 'title', 'aa');

  例10 样式的修改

v-bind:class="{active:isActive,line:isLine}"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js">
        </script>
        <style>
            .active {
                 100px;
                height: 100px;
                background: green;
            }
            .line{
                 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    
    <body >
      <div id="app">
          <h1 v-bind:class="{active:isActive,line:isLine}">{{message}}</h1>
          <button v-on:click="btnClick">按钮</button>
      </div>
    </body>
    
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            isActive:true,
            isLine:false
        },
        methods:{
            btnClick:function(){
                this.isActive=!this.isActive
            }
        }
    })
</script>

</html>
View Code

点击按钮后

例11 样式的修改（methods形式）

<h1 v-bind:class="{active:isActive,line:isLine}">{{message}}</h1>
<h1 v-bind:class="getClasses()">{{message}}</h1>
methods:{
            btnClick:function(){
                this.isActive=!this.isActive
            },
            getClasses:function(){
                return {active:this.isActive,line:this.isLine}
            }
        }

效果与上面例子一致

例12 li点击选中样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js">
        </script>
        <style>
            .active {
                background: #febeee;
            }
        </style>
    </head>
    
    <body >
      <div id="app">
          <ul>
              <li v-for="(m,index) in movies" 
                v-on:click='liClick(index)' 
                v-bind:class="{active:currentIndex === index}">
                    {{m}}
            </li>
          </ul>
      </div>
    </body>
    
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
            currentIndex :0
        },
        methods:{
            liClick:function(index){
                this.currentIndex=index
            },
            
        }
    })
</script>

</html>
View Code

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/polax/p/12794762.html