vue语法说明

最新推荐文章于 2023-08-01 23:19:13 发布

JJ-Choi

最新推荐文章于 2023-08-01 23:19:13 发布

阅读量438

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/jnc1999/article/details/103704333

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、获得Vue支持:
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

2、获得初始化Vue函数获取文本数据及自定义函数:
<div id="vue_det">
       
       <h1>site : {{site}}</h1>
       
       <h1>url : {{url}}</h1>
       
       <h1>{{details()}}</h1>
   </div>
   <script type="text/javascript">
       //定义并初始化Vue函数
       var vm = new Vue({
           el: '#vue_det',   //获得目标元素

           //初始化元素数据
           data: {
               site: "菜鸟教程",
               url: "www.runoob.com",
               alexa: "10000"
           },

           //定义函数内方法
           methods: {
               details: function() {   //定义函数函数名为details()
                   return this.site + " - 学的不仅是技术，更是梦想！" + this.alexa;
               }
           }
       })
   </script>

3、Vue定位元素关键字:
site

4、获取文本元素2(Vue函数+JS):
<div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
        // 我们的数据对象
        var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 1000}
        //先渲染一遍
        var vm = new Vue({
            el: '#vue_det',
            data: data
        })

        //在后面再渲染一遍
        // 它们引用相同的对象！
        document.write(vm.site === data.site) // true
       document.write("<br>")
        // 设置属性也会影响到原始数据
        vm.site = "Runoob"
        document.write(vm.site + "<br>") // Runoob

        // ……反之亦然
        data.alexa = 1234
        document.write(vm.alexa) // 1234,放回Vue函数
    </script>

5、Vue内置文本元素提取:
(1)除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
(2)如:
$data
$el
(3)实例:
<div id="vue_det">
       <h1>site : {{site}}</h1>
       <h1>url : {{url}}</h1>
       <h1>Alexa : {{alexa}}</h1>
   </div>
   <script type="text/javascript">
       // 我们的数据对象
       var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
       var vm = new Vue({
           el: '#vue_det',
           data: data
       })
       //Vue函数内置元素提取
       document.write(vm.$data === data) // true
       document.write("<br>")
       //Vue函数内置元素提取
       document.write(vm.$el === document.getElementById('vue_det')) // true
   </script>

6、v-html定义html样式:
<div id="app">
       
        <div v-html="message"></div>
   </div>

   <script>
       new Vue({
          el: '#app',
          data: {
            message: '<h1>菜鸟教程</h1>'
          }
       })
   </script>

7、v-bind绑定元素(并以伪类作判断):
<div id="app">
      <label for="r1">修改颜色</label>
      
      <input type="checkbox" v-model="use" id="r1">
      <br><br>
      
      <div v-bind:class="{'class1': use}">
        v-bind:class 指令
      </div>
   </div>

   <script>
       new Vue({
            el: '#app',
          data:{
              use: false
          }
       });
   </script>

8、vue直接使用JS表达式:
<div id="app">
       {{5+5}}<br>
       {{ ok ? 'YES' : 'NO' }}<br>
       {{ message.split('').reverse().join('') }}
       
       <div v-bind:id="'list-' + id">菜鸟教程</div>
   </div>

   <script>
       new Vue({
          el: '#app',
          data: {
           ok: true,
            message: 'RUNOOB',
           id : 1
          }
       })
   </script>

9、vue指令判断:
<div id="app">
       
        <p v-if="seen">现在你看到我了</p>
        
        <template v-if="ok">
          <h1>菜鸟教程</h1>
          <p>学的不仅是技术，更是梦想！</p>
          <p>哈哈哈，打字辛苦啊！！！</p>
        </template>
   </div>

   <script>
       new Vue({
          el: '#app',
          data: {
            seen: false,
            ok: true
          }
       })
   </script>

10、vue使用v-bind指定参数:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>vue使用v-bind指定参数</title>
   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
   <div id="app">
        <pre><a v-bind:href="url">菜鸟教程</a></pre>
   </div>

   <script>
   new Vue({
      el: '#app',
      data: {
        url: 'http://www.runoob.com'
      }
   })
   </script>

</body>
</html>

11、vue使用v-model进行双向绑定:
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

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

12、vue点击双向绑定元素:
<div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
   </div>

   <script>
   new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
   })
   </script>

13、vue使用过滤器判断首字母是否为大写若否则转大写:
<div id="app">
      {{ message | capitalize(message) }}
   </div>

   <script>
       new Vue({
          el: '#app',
          data: {
           message: 'munoob'
          },
          filters: {
            capitalize: function (value) {
              if (!value) return ''
              value = value.toString()
              return value.charAt(0).toUpperCase() + value.slice(1)
            }
          }
       })
   </script>

14、vue使用if-else函数:
<div id="app">
       <div v-if="Math.random() > 0.5">
          Sorry
       </div>
       <div v-else>
          Not sorry
       </div>
   </div>

   <script>
       new Vue({
          el: '#app'
       })
   </script>

15、vue使用if-else if函数:
<div id="app">
        <div v-if="type === 'A'">
          A
       </div>
       <div v-else-if="type === 'B'">
          B
       </div>
       <div v-else-if="type === 'C'">
          C
       </div>
       <div v-else>
          Not A/B/C
       </div>
   </div>

   <script>
       new Vue({
          el: '#app',
          data: {
            type: 'D'
          }
       })
   </script>

16、vue使用v-show多路分支判断:
<div id="app">
        <h1 v-show="ok">Hello!</h1>
       <h1 v-show="ok1">Hello!</h1>
       <h1 v-show="ok2">Hello!</h1>
       <h1 v-show="ok3">Hello!</h1>
   </div>

   <script>
   new Vue({
      el: '#app',
      data: {
        ok: true,
       ok1: false,
       ok2: true,
       ok3: false
      }
   })
   </script>

17、Vue循环:
<div id="app">
      <ol>
        <li v-for="site in sites">
          {{ site.name }}
        </li>
      </ol>
   </div>

18、Vue模板中循环:
<div id="app">
      <ul>
        <template v-for="site in sites">
          <li>{{ site.name }}</li>
          <li>--------------</li>
        </template>
      </ul>
   </div>

19、Vue迭代器中循环:
<div id="app">
      <ul>
        <li v-for="value in object">
        {{ value }}
        </li>
      </ul>
   </div>

20、Vue迭代器中循环(键值对形式):
<div id="app">
      <ul>
        <li v-for="(value, key) in object">
        {{key}}:{{ value }}
        </li>
      </ul>
   </div>

21、Vue迭代器中循环(键值对+索引位置形式):
<div id="app">
      <ul>
        <li v-for="(value, key, index) in object">
         {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
   </div>

22、Vue迭代器中循环（常量总数）:
<div id="app">
      <ul>
        <li v-for="n in 10">
         {{ n }}
        </li>
      </ul>
   </div>

23、Vue函数内元素computed（计算的）的实例:
<div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
   </div>

24、Vue函数内元素computed与methods区别:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue函数内元素computed与methods区别</title>
   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
   
   <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
      <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
   </div>

</body>
</html>

25、Vue函数内元素computed的get与set:
<div id="app">
<p>{{ site }}</p>
</div>

26、watch监听属性(双向绑定):
<div id = "app">
   <p style = "font-size:25px;">计数器: {{ counter }}</p>
   <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
   var vm = new Vue({
   el: '#app',
   data: {
       counter: 1 //设置原始值
   }
   });
   vm.$watch('counter', function(nval, oval) {   //oval原始值、nval最终值，watch监听内置函数
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
   });
</script>

27、watch监听属性(内置watch函数+双向绑定):
<div id = "computed_props">
       千米 : <input type = "text" v-model = "kilometers">
       米 : <input type = "text" v-model = "meters">
   </div>
   <p id="info"></p>
   <script type = "text/javascript">
       var vm = new Vue({
       el: '#computed_props',
       data: {
           kilometers : 0,
           meters:0
       },
       methods: {
       },
       computed :{
       },
       watch : {   //watch内置函数
           kilometers:function(val) {
              this.kilometers = val;
              this.meters = this.kilometers * 1000
           },
           meters : function (val) {
              this.kilometers = val/ 1000;
              this.meters = val;
           }
       }
       });
       // $watch 是一个实例方法
       vm.$watch('kilometers', function (newValue, oldValue) {
       // 这个回调将在 vm.kilometers 改变后调用
       document.getElementById ("info").innerHTML = "kilometers修改前值为: " + oldValue + "，修改后值为: " + newValue;
       })
   </script>

28、v-bind绑定class作为伪类响应判断:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定class作为伪类响应判断</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.active {
   width: 100px;
   height: 100px;
   background: green;
}
</style>
</head>
<body>
   <div id="app">
       <div v-bind:class="{ active: isActive }"></div>
   </div>

</body>
</html>

29、v-bind绑定class作为伪类响应判断同时再内嵌一个class伪类判断:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定class作为伪类响应判断同时再内嵌一个class伪类判断</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.active {
   width: 100px;
   height: 100px;
   background: green;
}
.text-danger {
   background: red;
}
</style>
</head>
<body>
   <div id="app">
       <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
       </div>
   </div>

</body>
</html>

30、v-bind绑定Vue函数内data数据集作为判断依据:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定Vue函数内data数据集作为判断依据</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.active {
   width: 100px;
   height: 100px;
   background: green;
}
.text-danger {
   background: red;
}
</style>
</head>
<body>
   <div id="app">
       <div v-bind:class="classObject"></div>
   </div>

</body>
</html>

31、v-bind绑定Vue函数内data数据集作为判断依据且在数据集中进行计算:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定Vue函数内data数据集作为判断依据且在数据集中进行计算</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.base {
width: 100px;
height: 100px;
}

.active {
background: green;
}

.text-danger {
background: red;
}

</style>
</head>
<body>
   <div id="app">
       <div v-bind:class="classObject"></div>
   </div>
   <script>

   new Vue({
       el: '#app',
       data: {
           isActive: true,
           error: {
              value: true,
              type: 'fatal'
           }
       },
       computed: {
           classObject: function () {
              return {
                   base: true,
                    active: this.isActive && !this.error.value,
                    'text-danger': this.error.value && this.error.type === 'fatal',
                  }
               }
           }
       })
   </script>

</body>
</html>

32、v-bind绑定CSS样式组:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定CSS样式组</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.active {
   width: 100px;
   height: 100px;
   background: green;
}
.text-danger {
   width: 200px;
   height: 200px;
   background: red;
}

</style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>

</body>
</html>

33、v-bind绑定CSS样式组（三元表达式判断）:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定CSS样式组（三元表达式判断）</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.text-danger {
   width: 100px;
   height: 100px;
   background: red;
}
.active {
   width: 100px;
   height: 100px;
   background: green;
}

</style>
</head>
<body>
<div id="app">
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

</body>
</html>

34、v-bind绑定CSS样式组（内联式）:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定CSS样式组（内联式）</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

</body>
</html>

35、v-bind绑定CSS样式组（Vue函数外联式）:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定CSS样式组（Vue函数外联式）</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObject">菜鸟教程</div>
</div>

</body>
</html>

36、v-bind绑定CSS样式组（Vue函数外联式数组）:
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定CSS样式组（Vue函数外联式数组）</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

</body>
</html>

37、v-on双向绑定Vue函数数据:
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

38、v-on双向绑定Vue函数JS自定义函数:
<div id="app">

<button v-on:click="greet">Greet</button>
</div>

39、v-on双向绑定内联JS自定义函数:
<html>
<head>
<meta charset="utf-8">
<title>v-on双向绑定内联JS自定义函数</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>

</body>
</html>

40、v-model双向绑定:
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>

<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

41、v-model双向绑定(数组型):
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>

42、v-model双向绑定(单选按钮):
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>

43、v-model双向绑定(select 列表):
<div id="app">
<select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
</select>

<div id="output">
      选择的网站是: {{selected}}
</div>
</div>

44、Vue自定义全局组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue自定义全局组件</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>

45、Vue自定义局部组件:
<div id="app">
<runoob></runoob>
</div>

// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
</script>

46、Vue自定义组件传递值属性props:
<div id="app">
<child message="hello!"></child>
</div>

47、Vue自定义组件传递值属性动态props:

<div id="app">
   <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
   </div>
</div>

48、Vue自定义组件v-bind将重复props提取:

<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>

49、Vue自定义组件自定义事件:

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>

<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
    return {
      counter: 0
    }
},
methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
},
})
new Vue({
el: '#counter-event-example',
data: {
    total: 0
},
methods: {
    incrementTotal: function () {
      this.total += 1
    }
}
})
</script>

50、Vue自定义组件data返回函数和返回对象的区别:
<div id="components-demo3" class="demo">
<button-counter2></button-counter2>
<button-counter2></button-counter2>
<button-counter2></button-counter2>
</div>

51、Vue 自定义指令:
<div id="app">
<p>页面载入时（Vue函数绑定的id为app的div），input 元素自动获取焦点：</p>
<input v-focus>
</div>

52、Vue 自定义指令（局部）:
<div id="app">
<p>页面载入时（Vue函数绑定的id为app的div），input 元素自动获取焦点：</p>
<input v-focus>
</div>

53、Vue 自定义指令（钩子函数）:
<!--
<div id="app" v-runoob:hello.a.b="message"> 自定义指令v-runoob绑定id为app的div，传递传给指令的参数hello，
一个包含修饰符的对象 {"a":true,"b":true} ，绑定参数message 指向 Vue函数中 data值message中定义的实际值'菜鸟教程!'

-->
<div id="app" v-runoob:hello.a.b="message">
</div>

54、Vue 自定义指令（内嵌JS函数）:

<div id="app">
<div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
</div>

55、Vue 路由实现单页面:
<div id="app">
<h1>Hello App!</h1>
<p>
    
    
    
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
</p>


<router-view></router-view>
</div>

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')

// 现在，应用已经启动了！
</script>

56、Vue动画:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue动画</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>

<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
    data: {
        show:true,
        styleobj :{
            fontSize:'30px',
            color:'red'
        }
    },
    methods : {
    }
});
</script>

</body>
</html>

57、CSS动画:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS动画</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="slide-fade">
    <p v-if="show">菜鸟教程</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: '#databinding',
    data: {
        show: true
    }
})
</script>

</body>
</html>

58、CSS动画二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS动画二</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
    transform: scale(0);
}
50% {
    transform: scale(1.5);
}
100% {
    transform: scale(1);
}
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="bounce">
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: '#databinding',
    data: {
        show: true
    }
})
</script>

</body>
</html>

59、JS+Vue钩子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS+Vue钩子</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
>
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
el: '#databinding',
data: {
    show: false
},
methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
}
})
</script>

</body>
</html>

60、Vue组件混入:
<div id = "databinding"></div>
   <script type = "text/javascript">
       var vm = new Vue({
           el: '#databinding',
           data: {
           },
           methods : {
           },
       });
       // 定义一个混入对象
       var myMixin = {
           created: function () {
               this.startmixin()
           },
           methods: {
               startmixin: function () {
                   document.write("欢迎来到混入实例");
               }
           }
       };
       var Component = Vue.extend({
           mixins: [myMixin]
       })
       var component = new Component();
   </script>

61、Vue组件选项合并混入:
<div id = "databinding"></div>
   <script type = "text/javascript">
   var mixin = {
       created: function () {
           document.write('混入调用' + '<br>')
       }
   }
   new Vue({
       mixins: [mixin],
           created: function () {
           document.write('组件调用' + '<br>')
       }
   });
   </script>

62、Vue组件混入优先级:
<div id = "databinding"></div>
   <script type = "text/javascript">
   var mixin = {
       methods: {
           hellworld: function () {
               document.write('HelloWorld 方法' + '<br>');
           },
           samemethod: function () {
               document.write('Mixin：相同方法名' + '<br>');
           }
       }
   };
   var vm = new Vue({
       mixins: [mixin],
       methods: {
           start: function () {
               document.write('start 方法' + '<br>');
           },
           samemethod: function () {
               document.write('Main：相同方法名' + '<br>');
           }
       }
   });
   vm.hellworld();
   vm.start();
   vm.samemethod();
   </script>

63、Vue全局注册组件混入:
<script type = "text/javascript">
   // 为自定义的选项 'myOption' 注入一个处理器。
   Vue.mixin({
      created: function () {
        var myOption = this.$options.myOption
        if (myOption) {
          document.write(myOption)
        }
      }
   })

   new Vue({
      myOption: 'hello!'
   })
   // => "hello!"
   </script>

64、Vue Ajax:
<div id="app">
      {{ info }}
   </div>
   <script type = "text/javascript">
   new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .get('https://www.runoob.com/try/ajax/json_demo.json')
          .then(response => (this.info = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
   })
   </script>

65、Vue Ajax 使用 response.data 读取 JSON 数据:
<div id="app">
      <h1>网站列表</h1>
      <div
        v-for="site in info"
      >
        {{ site.name }}
      </div>
   </div>
   <script type = "text/javascript">
   new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .get('https://www.runoob.com/try/ajax/json_demo.json')
          .then(response => (this.info = response.data.sites))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
   })
   </script>

66、Vue Ajax POST 方法:
<html>
<head>
<meta charset="utf-8">
<title>Vue Ajax POST 方法</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
   <div id="app">
      {{ info }}
   </div>
   <script type = "text/javascript">
   new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
          .then(response => (this.info = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
   })
   </script>

</body>
</html>

67、Vue.js Ajax(vue-resource) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Ajax(vue-resource) </title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
   <input type="button" @click="get()" value="点我异步获取数据(Get)">
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
    },
    methods:{
        get:function(){
            //发送get请求
            this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
                document.write(res.body);
            },function(){
                console.log('请求失败处理');
            });
        }
    }
});
}
</script>
</body>
</html>

68、Vue.js Ajax(vue-resource) POST:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Ajax(vue-resource) POST</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
    <input type="button" @click="post()" value="点我异步获取数据(Post)">
</div>
<script type = "text/javascript">
window.onload = function(){
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        },
        methods:{
            post:function(){
                //发送 post 请求
                this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
                    document.write(res.body);
                },function(res){
                    console.log(res.status);
                });
            }
        }
    });
}
</script>
</body>
</html>

69、Vue 监听响应实现每十秒加20:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 监听响应实现每十秒加20</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
    function(){
        vm.counter += 20;
    },10000
);
</script>
</body>
</html>

70、Vue响应式编程,添加元素:
<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<div id = "app">
   <p style = "font-size:25px;">计数器: {{ products.id }}</p>
   <button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
vm.products.qty = "1"; //Vue响应式编程,添加元素
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

71、Vue响应式编程,set添加元素:
<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

72、Vue响应式编程,delete删除元素:
<div id = "app">
   <p style = "font-size:25px;">计数器: {{ products.id }}</p>
   <button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>