Newbie_小白
没有都对的别人，也没有全错的自己，至少要有自己的坚持，无关他人、无关外物！
vue 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!-- this is our View -->
  <div id="example-1">
    Hello {{ name }}!
  </div>
  <!---------------- VUE-->
  <script>
  // this is our Model
  var exampleData = {
    name: 'Vue.js'
  }

  // create a Vue instance, or, a "ViewModel"
  // which links the View and the Model
  var exampleVM = new Vue({
    el: '#example-1',
    data: exampleData
  })

  //F12
  // exampleVM.name = 123
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!----------------view-->
  <div id="app">
    <app-nav></app-nav>
      <!--<app-sidebar></app-sidebar>-->
      <!--<app-content></app-content>-->
      <app-view>
      </app-view>
  </div>
  <!---------------- VUE-->
  <script>
  // 定义
  var appNav = Vue.extend({
    template: '<div>appNav</div>'
  })
  var appView = Vue.extend({
    template: '<div><app-sidebar></app-sidebar><app-content></app-content></div>'
  })
  var appSidebar = Vue.extend({
    template: '<div>appSidebar</div>'
  })
  var appContent = Vue.extend({
    template: '<div>appContent</div>'
  })

  // 注册
  Vue.component('app-nav', appNav)
  Vue.component('app-view', appView)
  Vue.component('app-sidebar', appSidebar)
  Vue.component('app-content', appContent)

  // 创建根实例
  new Vue({
    el: '#app'
  })
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>
  <style type="text/css">
  #Header {
    width: 360px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 15px;
    color: #fffaf3;
    font-weight: bold;
    background-color: #f9c81e;
  }

  #Sidebar {
    width: 120px;
    float: left;
    height: 280px;
    text-align: center;
    line-height: 280px;
    font-size: 15px;
    color: #ffffff;
    font-weight: bold;
    background-color: #cecece;
  }

  #body {
    width: 240px;
    height: 280px;
    text-align: center;
    line-height: 280px;
    font-size: 15px;
    color: #f9c81e;
    font-weight: bold;
    background-color: #fffaf3;
    float: left;
  }

  #Footer {
    width: 360px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 15px;
    color: #fffaf3;
    font-weight: bold;
    background-color: #f9c81e;
  }
  </style>
</head>

<body>
  <!----------------view 宣告自定义的元素-->
  <div id="app">
    <app-header></app-header>
    <app-sidebar></app-sidebar>
    <app-body></app-body>
    <div style='clear:both;'></div>
    <app-footer></app-footer>
  </div>
  <!---------------- VUE-->
  <script>
  // 定义 (用 Vue.extend() 创建一个组件构造器)
  var appHeader = Vue.extend({
    template: '<div id="Header">上方列</div>'
  })
  var appSidebar = Vue.extend({
    template: '<div id="Sidebar">侧边栏</div>'
  })
  var appBody = Vue.extend({
    template: '<div id="Body">内容</div>'
  })
  var appFooter = Vue.extend({
      template: '<div id="Footer">页尾资讯</div>'
  })
  // 注册 (要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：)
  // 注意！组件注册后，会去替换 自定义的元素
  Vue.component('app-header', appHeader)
  Vue.component('app-sidebar', appSidebar)
  Vue.component('app-body', appBody)
  Vue.component('app-footer', appFooter)
  // 创建根实例
  new Vue({
    el: '#app'
  })
  </script>
</body>

</html>
<!--

-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Constructor demo</title>
</head>

<body>
<!-- 参考网址 java script 物件导向 mdn
    https://developer.mozilla.org/zh-TW/docs/JavaScript_%E7%89%A9%E4%BB%B6%E5%B0%8E%E5%90%91%E4%BB%8B%E7%B4%B9#The_Constructor
-->


    <script>
    //-------- java script Constructor 构造器
    function Person(gender) {
        this.gender = gender; // Person 的 Property (object attribute)
    }

    Person.prototype.sayGender = function() {
        //  Person class 增加了一個 sayHello() method
        document.write("this.gender:"+ this.gender); // Person 的 Methods (object attribute)
    };

    var person1 = new Person('男性');  // person1 是 Person class 的实例

    person1.sayGender(); // 使用 person1 实例中，的一个方法
    </script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>VUE Component demo</title>
</head>

<body>
    <div id="app">
    </div>
    <script>
    var MyComponent = Vue.extend({
        template: '<div>我是 vue 的组件实例，有看到吗？</div>'
    })

    var myComponentInstance = new MyComponent()

    console.log(myComponentInstance);

    // 控制台中，可以看到
    // vue 的组件实例
    // $el, $root
    //
    // 执行 myComponentInstance.$mount('#app')
    // 可以看到 这个 vue的组件实例，就挂载在 #app
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>VUE Component demo</title>
</head>

<body>
    <script>
    var data = {
        a: 1
    }
    var vm = new Vue({
        data: data
    })


    //每个 Vue 实例都会代理其 data 对象里所有的属性
    // 请见控制台
    // vm.a === data.a // -> true

    // setting the property also affects original data
    //vm.a = 2
    //data.a // -> 2

    // ... and vice-versa
    //data.a = 3
    //vm.a // -> 3
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>VUE Component demo</title>
</head>

<body>
    <div id="example">
        你好，我是台湾小凡 {{a}}
    </div>
    <script>
    var data = {
        a:'感谢 vue.js 群 364912432'
    }
    var vm = new Vue({
        el: '#example',
        data: data
    })

    // vm.$data === data // -> true
    // vm.$el === document.getElementById('example') // -> true

    // vm.$el

    // $watch 是一个实例方法，监视着 vue data 的变化，一有变化，都会启动
    vm.$watch('a', function(newVal, oldVal) {
        // 这个回调将在 `vm.a`  改变后调用
        console.log('a 原来的值:' + oldVal + ', 新的值:' + newVal);
    })

    // vm.a='感谢群友的支持'
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>VUE Component demo</title>
</head>

<body>
    <script>
    var vm = new Vue({
            data: {
                a: 1
            },
            created: function() {
                // `this` points to the vm instance
                console.log('a is: ' + this.a)
            }
        })
        // -> "a is: 1"
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>VUE Component demo</title>
</head>

<body>
    <div id="app">
    </div>
    <script>
    var MyComponent = Vue.extend({
        template: '<div>我是 vue 的组件实例，有看到吗？</div>',
        init: function() {
            console.log('生命周期 init，在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化。');
        },
        created: function() {
            console.log('生命周期 created，在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。')
        },
        beforeCompile: function() {
            console.log('生命周期 beforeCompile, 在编译开始前调用。');
        },
        compiled: function() {
          console.log('生命周期 compiled, 在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。')
        },
        ready:function (){
          console.log('生命周期 ready, 在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。');
        },
        attached:function (){
          console.log('生命周期 attached, 在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。');
        },
        detached:function(){
          console.log('生命周期 detached, 在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。')
        },
        beforeDestroy:function (){
          console.log('生命周期 beforeDestroy , 在开始销毁实例时调用。此时实例仍然有功能。')
        },
        destroyed:function(){
          console.log('生命周期 destroyed, 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，所有的子实例也已经被销毁。如果有离开过渡，destroyed 钩子在过渡完成之后调用。');
        }

    })

    var myComponentInstance = new MyComponent()

    // 控制台中，可以看到
    // 执行 myComponentInstance.$mount('#app')
    // 执行 myComponentInstance.$destroy('#app')
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
        插值-文本
    </title>
</head>

<body>
    <!---->
    <div id="app">
        <span>Message: {{ msg }}</span>
        <input type="text" v-model="msg" placeholder="this is msg">
        <br>
        <span v-once>This will never change: {{ msg1 }}</span>
        <input type="text" v-model="msg1" placeholder="this is msg1">
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js!',
            msg1: 'Hello Vue.js!'
        }
    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
<!--三个大括号，跟二个大括号的区别-->
<div id="app">
    <div v-html="raw_html"></div>
    <hr>
    <div>{{ raw_html }}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            raw_html: '<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">',
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
    <!--
    Mustache 标签也可以用在 HTML 特性 (Attributes) 内：
    请见控制台
    -->
    <div id="app">
        <p i="123"  id ="abc" name ="abc">你好，我是台湾小凡</p>
        <div :id="'item-'+id"></div>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            id: 979866666666
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
    <!--
    java script 表达式
    -->
    <div id="app">
        <div>{{ number + 1 }} </div>
        <div>{{ ok ? 'YES' : 'NO' }} </div>
        <div> {{ message.split('').reverse().join('') }}</div>
        <div>{{arr.join('')}}</div>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            number:100,
            ok:false,
            message:'i love vue.js!',
            arr:['0','1','2','3','4','5','6','7','8']
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
<!--
过滤器，capitalize 第一个文字转大写
-->
<div id="app">
    <h1>{{ message | capitalize }}</h1>
    <br>
    <h1>{{ message1| capitalize }}</h1>
</div>
<script>
    Vue.filter('capitalize', function (value) {
        if (!value) {
            return ''
        }
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })
    var myFilter = Vue.filter('capitalize')

    new Vue({
        el: '#app',
        data: {
            message: 'i love vue.js!',
            message1: 'are you?'
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
<!--
过滤器，capitalize 第一个文字转大写
lowercase  是全部转小写
此示例：讲解 连续使用两个过滤器
-->
<div id="app">
    <h1>{{ message | capitalize | lowercase }}</h1>
    <br>
    <h1>{{ message1| capitalize }}</h1>
</div>
<script>
    Vue.filter('capitalize', function (value) {
        if (!value) {
            return ''
        }
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })
    Vue.filter('lowercase', function (value) {
        if (!value) {
            return ''
        }
        value = value.toString()
        return value.toLowerCase()
    })
    Vue.filter('capitalize')
    Vue.filter('lowercase')
    new Vue({
        el: '#app',
        data: {
            message: 'i love vue.js!',
            message1: 'are you?'
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
<!--
过滤器，可以传递参数
-->
<div id="app">
    <h1>
        <pre>{{ message | strSlice(2) }}</pre>
    </h1>
    <br>
    <h1>
        <pre>{{ message| strSlice(4) }}</pre>
    </h1>
</div>
<script>
    Vue.filter(
        'strSlice', function (value, i) {
            return value.slice(i);
        }
    );
    Vue.filter('strSlice');
    new Vue({
        el: '#app',
        data: {
            message:'123456789'

        }
    })
</script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
    <!--

    自定义过滤器，简单示例
    -->
    <div id="app">
        <!-- 'hello' => 'before hello after' -->
        <span>{{message | wrap('before','after')}}</span>
    </div>
    <script>
    Vue.filter('wrap', function(value, begin, end) {
        return begin + value + end
    })

    new Vue({
        el: '#app',
        data: {
            message:' hello '
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
    <!--

    指令, 简单示例
    -->
    <div id="app">
        <p v-if="greeting">Hello!</p>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            greeting: false
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
    <!--

    指令-参数, 简单示例
    -->
    <div id="app">
        <a :href="url">{{text}}</a>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            url: 'http://www.baidu.com',
            text:'百度'
        }
    })
    </script>
</body>

</html>

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
    <!--

    指令-事件, 简单示例
    -->
    <div id="app">
        <a @click="doSomething1">将 a = 1</a>
        <br>
        <a @click="doSomething2">将 a = 2</a>
        <h1>{{a}}</h1>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            a: 100
        },
        methods: {
            doSomething1: function() {
                this.a = 1
            },
            doSomething2: function() {
                this.a = 2
            },

        }
    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../vue.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
</head>

<body>
<!--

指令-事件, 简单示例
-->
<div id="app">
    <a @click.once="alterA">改变a的值</a>
    <span>a:{{a}}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            a: 100
        },
        methods: {
            alterA: function () {
                this.a = 200
            }
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="example">
        a = {{a}}, b = {{b}}
    </div>
    <script>
    var vm = new Vue({
        el: '#example',
        data: {
            a: 1
        },
        computed: {
            // a computed getter
            b: function() {
                // `this` points to the vm instance
                return this.a + 1
            }
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
<div id="demo">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    {{fullName}}
</div>
<script>
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'firstname',
            lastName: 'lastname',
            fullName:'firstname lastname'
        },

    })

    vm.$watch('firstName', function (val) {
        this.fullName = val + ' ' + this.lastName
    })

    vm.$watch('lastName', function (val) {
        this.fullName = this.firstName + ' ' + val
    })

</script>
</body>

</html>

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
<div id="demo">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    {{fullName}}
</div>
<script>
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'firstname',
            lastName: 'lastname',
            fullName:'firstname lastname'
        },
        watch:{
            'firstName':function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            'lastName':function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }

    })


</script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="demo">{{fullName}}</div>
    <script>
    var vm = new Vue({
        el:'#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName: function() {
                return this.firstName + '--' + this.lastName
            }
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="demo">{{fullName}}</div>
  <script>
  var vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
      fullName: {
        // getter, Vue 取出 model 资料
        get: function() {
          return this.firstName + ' ' + this.lastName
        },
        // setter， Vue 设定 model 资料，请见控制台 vm.fullName='vue.js good'
        set: function(newValue) {
          console.log('----执行 setter')
          console.log('传入的字串:' + newValue)
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
  })
  </script>
</body>

</html>

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="test">
        <div v-for="(item,index) in items">
            <div>
              <span style="background-color: yellow; width: 80px; display: inline-block;">{{item.name}}</span>
                <input type="text" v-model="item.value" lazy number>
            </div>
        </div>
        计算后：{{total}}
    </div>
    <script>
    Vue.config.debug = true
    var vm = new Vue({
        el:'#test',
        data: {
            items: [{
                name: '安全手套',
                value: 100
            }, {
                name: '手电筒',
                value: 200
            }, {
                name: '雨鞋',
                value: 300
            }]

        },
        computed: {
            total: function() {
                self = this;
                var tmp = 0;
                for (var i = 0; i < self.items.length; i++) {
                    tmp = tmp + self.items[i].value;
                }
                return tmp;
            }
        }

    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .big {
            font-size: 20px;
        }

        .red {
            color: red;
        }

        .blue {
            color: #0000FF;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="red" :class="className1">台湾小凡 vue.js 官网讲解</div>
    <div :class="className2">台湾小凡 vue.js 官网讲解</div>
    <div :class="{ 'big': true, 'blue': true }">台湾小凡, 故意两种的写法，都用上！！！, Vue.js 会报错</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            className1: 'big',
            className2: 'blue'
        }
    });
</script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
  .static {
    font-size: 120px;
    width: 600px;
    margin: 0 auto;
    background-color: yellow;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .class-a {
    color: #FF0000;
  }

  .class-b {
    text-decoration: underline;
  }
  </style>
</head>

<body>
<!--请见控制台-->
  <div id="app">
    <div class="static" :class="{ 'class-a': isA, 'class-b': isB }">台湾小凡 vue.js 官网讲解</div>
    <div align="center">
      <button @click="isA = !isA">isA ={{isA}}</button>
      <button @click="isB = !isB">isB ={{isB}}</button>
    </div>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      isA: true,
      isB: true
    }
  });
  </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
  .static {
    font-size: 120px;
    width: 600px;
    margin: 0 auto;
    background-color: yellow;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .class-a {
    color: #FF0000;
  }

  .class-b {
    text-decoration: underline;
  }
  </style>
</head>

<body>
  <div id="app">
    <div :class="classObject">台湾小凡 vue.js 官网讲解</div>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      classObject: {
        'class-a':true,
        'class-b': false
      }
    }
  });
  </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
  .classA {
    color: #FF0000;
  }

  .classB {
    text-decoration: underline;
  }
  .classC {
    background-color: yellow;
  }
  </style>
</head>

<body>
  <div id="app">
    <div :class="ccgo">台湾小凡 vue.js 官网讲解</div>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      cc: ['A'],
      b:true
    },
    computed: {
      ccgo: function() {
        return {
          'classA': this.cc.indexOf('A') > -1,
          'classB': this.b,
          'classC': this.cc.indexOf('C') > -1
        };
      }
    }
  });
  </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
  .static {
    font-size: 120px;
    width: 600px;
    margin: 0 auto;
    background-color: yellow;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .class-a {
    color: #FF0000;
  }

  .class-b {
    text-decoration: underline;
  }
  </style>
</head>

<body>
  <div id="app">
    <div :class="[classA, classB]">台湾小凡 vue.js 官网讲解</div>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      classA: 'class-a',
      classB: 'class-b'
    }

  });
  </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
  .static {
    font-size: 120px;
    width: 600px;
    margin: 0 auto;
    background-color: yellow;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .class-a {
    color: #FF0000;
  }

  .classB {
    text-decoration: underline;
  }

  .classC {
    text-shadow: 2px 2px 4px #000000;
  }
  </style>
</head>

<body>
  <div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' ,'background-color':bgcolor}">
      台湾小凡 vue.js 官网讲解</div>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      activeColor: 'red',
      fontSize: 30,
      bgcolor: 'yellow'
    }
  });
  </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      ok: false // 控制台 操作
    }
  })
  </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <template v-if="ok1">
      <h1>A</h1>
      <p>Paragraph A</p>
      <p>Paragraph A</p>
    </template>
    <template v-if="ok2">
      <h1>B</h1>
      <p>Paragraph B</p>
      <p>Paragraph B</p>
    </template>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      ok: true, // 控制台 操作
      ok1:true, // 控制台 操作
      ok2:true // 控制台 操作
    }
  })
  </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
  <!--vue.js 规定 template 不能使用 v-show-->
    <template v-show="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <!--在一般的标签，使用 v-show 是可以的-->
    <h1 v-show="ok">Hello!</h1>
  </div>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      ok: false, // 控制台 操作，看 dom 结构

    }
  })
  </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!--你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）-->
    <div id="example-1">
        <div v-for="(item,index) in items">
            {{ ++index }} {{ item.message }}
        </div>
        <hr>
        <!--从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：-->
        <div v-for="(item,index) of items">
            {{ ++index }} {{ item.message }}
        </div>
    </div>
    <script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                message: 'Foo'
            }, {
                message: 'Bar'
            }]
        }
    })
    </script>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
    .divider {
        height: 1px;
        margin: 9px 1px;
        overflow: hidden;
        background-color: #e5e5e5;
        border-bottom: 1px solid #ffffff;
    }
    </style>
</head>

<body>
    <!--
    类似于 template v-if，也可以将 v-for
    用在 <template> 标签上，以渲染一个包含多个元素的块。例如：
    -->
    <div id="example-1">
        <ul>
            <template v-for="(item,index) in items">
                <li>{{++index}}:</li>
                <li>{{ item.msg }}</li>
                <li class="divider"></li>
            </template>
        </ul>
    </div>
    <script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                msg: 'Foo'
            }, {
                msg: 'Bar'
            }]
        }
    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
<!--
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：
-->
<div id="example-1">
    <ul>
        <template v-for="item in items">
            <li>{{ item.msg }}</li>
        </template>
    </ul>
    <div class="blue">
        {{json}}
    </div>
    <div>{{$data}}</div>
    <pre>
        Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：
          push()
            向数组的末尾添加一个或更多元素，并返回新的长度。
            example1.items.push({msg:'台湾小凡'})
          pop()
            用于删除并返回数组的最后一个元素。
            example1.items.pop()
          shift()
            删除并返回数组的第一个元素
            example1.items.shift()
          unshift()
            向数组的开头添加一个或更多元素，并返回新的长度。
            example1.items.unshift({msg:'台湾小凡'})
          splice()
            从某个已有的数组返回选定的元素
            example1.items.splice()
          sort()
            对数组的元素进行排序
            example1.items.sort()
          reverse
            颠倒数组中元素的顺序。
            example1.items.reverse()

          你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。
          例如：example1.items.push({ message: 'Baz' })。
        </pre>
</div>
<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                msg: 'Foo'
            }, {
                msg: 'Bar'
            }, {
                msg: 'George'
            }, {
                msg: 'John'
            }, {
                msg: 'Thomas'
            }, {
                msg: 'James'
            }, {
                msg: 'Adrew'
            }, {
                msg: 'Martin'
            }
            ]
        },
        computed:{
            json:function () {
                console.log(this.$data);
                console.log(JSON.stringify(this.$data, null, 2));
                return JSON.stringify(this.$data, null, 40);
            }
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>

<body>

<div id="example-1">
    <ul>
        <template v-for="(item,index) in items">
            <li>{{++index}}.{{ item.msg }}</li>
        </template>
    </ul>
    <button @click="f1">执行 f1 filter /o/</button>
    <button @click="f2">执行 f2 concat arr</button>
    <button @click="f3">执行 f3 splice(2,3)</button>
    <div class="blue">
        {{$data}}
    </div>

    <pre>
        变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。
        在使用非变异方法时，可以直接用新数组替换旧数组：
        可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。
        Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，
        因而用另一个数组替换数组是一个非常高效的操作。
        </pre>
</div>
<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                msg: 'Foo'
            }, {
                msg: 'Bar'
            }, {
                msg: 'George'
            }, {
                msg: 'John'
            }, {
                msg: 'Thomas'
            }, {
                msg: 'James'
            }, {
                msg: 'Adrew'
            }, {
                msg: 'Martin'
            }],
            arr: [{
                msg: '台湾小凡'
            }, {
                msg: '感谢'
            }, {
                msg: '群友'
            }]
        },
        methods: {
            f1: function () {
                example1.items = example1.items.filter(function (item) {
                    return item.msg.match(/o/)
                })
            },
            f2: function () {
                example1.items = example1.items.concat(this.arr[0])
                example1.items = example1.items.concat(this.arr[1])
                example1.items = example1.items.concat(this.arr[2])
            },
            f3: function () {
                example1.items = example1.items.splice(2, 3)
            }
        }

    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
<div id="example-1">
    <ul>
        <li  v-for="(item,index) in items" :key="item._uid">{{++index}}、 {{ item._uid }}</li>
    </ul>

    <div class="blue">
        {{$data}}
    </div>
    <pre>

有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。
因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。
但是，如果每个对象都有一个唯一 ID 的属性，
便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象
它知道它可以复用这个已有对象的作用域与 DOM 元素。

台湾小凡：简单讲，就是 v-for 遍历 model 时，vue.js ，会建立索引键，这个键要求是不重复，不然会出错
track-by="_uid", 使用者指定 索引键，是那个部份
        </pre>
</div>
<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                _uid: '11',

            }, {
                _uid: '12',
            }]
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
    .blue {
        color: blue;
    }
    </style>
</head>

<body>
    <div id="example-1">
        <ul>
        <!-- 计算属性 与列表渲染-->
            <template v-for="item in filter1">
                <li>{{ item}}</li>
            </template>
        </ul>
    </div>
    <script>
    Vue.config.debug = true;
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                msg: 'Foo'
            }, {
                msg: 'Bar'
            }, {
                msg: 'George'
            }, {
                msg: 'John'
            }, {
                msg: 'Thomas'
            }, {
                msg: 'James'
            }, {
                msg: 'Adrew'
            }, {
                msg: 'Martin'
            }]
        },
        computed: {
            filter1: function() {
                /*
                 * itmes 字串长度大于4，形成列表
                 */
                self = this;
                var arr=[];
                for (var i = 0, l = self.items.length; i < l; i++) {
                    //console.log(self.items[i].msg);
                    var str_len = self.items[i].msg.length;
                    //.log(str_len);
                    if (str_len >=5){
                        arr.push(self.items[i].msg);
                    }
                }
                //console.log('arr:'+ arr);
                return arr;
            }
        }
    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
<div id="example">
    <button @click="greet">Greet</button>
    <span  @click="greet">点击一下</span>
</div>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            name: 'Vue.js'
        },
        // define methods under the `methods` object
        methods: {
            greet: function (event) {
                // `this` inside methods point to the Vue instance
                console.log('Hello ' + this.name + '!') // this.name , 为 vue 实例的 data
                // `event` is the native DOM event
                console.log(event.target.tagName)  // 出现 button，事件目标的 tag name
            }
        }
    })

    // you can invoke methods in JavaScript too
//    vm.greet() // -> 'Hello Vue.js!'  注：小凡，执行 vm实例的 greet() 函数
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="example-2">
        <button @click="say('hello!', $event)">Submit</button>
        <a href="http://vuejs.org/"  @click="say('vuejs!', $event)" >http://vuejs.org/</a>
        <p>preventDefault() 方法将防止上面的链接打开 URL。</p>
    </div>
    <script>
    new Vue({
        el: '#example-2',
        methods: {
            say: function(msg, event) {
                console.log(event.type);
                console.log(event); // 控制台，看得比较精确
                console.log(msg);
                event.preventDefault(); //preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
            }
        }
    })
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
<div id="example-2">
    <ul>
        <li>
            <input @keyup.13="say('第1式')" v-model="a1"> 当你按下 enter ，弹窗
        </li>
        <li>
            <!-- same as above -->
            <input @keyup.enter="say1('第2式')" v-model="a2"> 当你按下 enter ，弹窗
        </li>
        <li>
            <!-- also works for shorthand -->
            <input @keyup.enter="say2('第3式')" v-model="a3"> 当你按下 enter ，弹窗
        </li>
        <li>
            <!-- enable @keyup.f1-->
            <input @keyup.f1="say3('第4式,f1')" v-model="a4"> 当你按下 ctrl+f1(macbook pro , fn+f1) ，弹窗
        </li>
        <li>
            <input @keyup.z="say3('第5式,Z')" v-model="a5"> 当你按下 ctrl+z(macbook pro , fn+Z) ，弹窗
        </li>
    </ul>
</div>
<script>
    // enable @keyup.f1
    Vue.config.keyCodes.f1 = 112;
    Vue.config.keyCodes.z = 90//设置修饰符别名
    new Vue({
        el: '#example-2',
        data: {
            a1: '',
            a2: '',
            a3: '',
            a4: '',
            a5: ''
        },
        methods: {
            say: function (msg) {
                alert(msg + ', ' + this.a1);
            },
            say1: function (msg) {
                alert(msg + ', ' + this.a2);
            },
            say2: function (msg) {
                alert(msg + ', ' + this.a3);
            },
            say3: function (msg) {
                alert(msg + ', ' + this.a4);
            }
        }
    })
</script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="example">
        <span>Message is: {{ message }}</span>
        <br>
        input text 双向绑定 demo<br>
        <input type="text" v-model="message" placeholder="edit me">
    </div>
    <script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Vue.js 很好用!'
        },

    })


    </script>
</body>

</html>

 

<!Doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        select {
            width: 185pt;
            height: 40pt;
            line-height: 40pt;
            padding-right: 20pt;
            text-indent: 4pt;
            text-align: left;
            vertical-align: middle;
            border: 1px solid #94c1e7;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-family: SimHei;
            font-size: 18pt;
            font-weight: 500;
            color: RGBA(102, 102, 102, 0.7);
            cursor: pointer;
            outline: none;
        }

        /*LABEL FOR SELECT*/
        label {
            position: relative;
            display: inline-block;
        }

        /*DOWNWARD ARROW (25bc)*/
        label::after {
            content: "\25bc";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 20pt;
            line-height: 40pt;
            vertical-align: middle;
            text-align: center;
            background: #94c1e7;
            color: #2984ce;
            -moz-border-radius: 0 6px 6px 0;
            -webkit-border-radius: 0 6px 6px 0;
            border-radius: 0 6px 6px 0;
            pointer-events: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="selectbox">
        <label>
            <select v-model="selected">
                <option v-for="(item,index) of options" :value="item.value">{{item.value}}</option>
            </select>
        </label>
        <p>您选择了：<span>{{selected}}</span></p>
    </div>
</div>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            options: [{
                text: 'One',
                value: 'A'
            }, {
                text: 'Two',
                value: 'B'
            }, {
                text: 'Three',
                value: 'C'
            }],
            selected:'B'
        }
    });
</script>
</body>
</html>

 

posted on 2017-08-10 09:36  Newbie_小白  阅读(180)  评论(0)  编辑  收藏  举报

Copyright © 2024 Newbie_小白
Powered by .NET 8.0 on Kubernetes Powered By博客园