<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue测试</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--混入实例-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--CDN-->
<!--<script src="https://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--自定义过渡-->
<!--<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">-->
<!--Velocity.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<!--Vue.js Ajax-->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!--异步加载-->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<style>
.class1 {
background: #7c1212;
color: #0b5b98;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to
{
opacity: 0
}
.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
{
transform: translateX(10px);
opacity: 0;
}
.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="app">
<!--获取变量值-->
<p>{{ message }}</p>
<p>{{ url }}</p>
<p>{{detail()}}</p>
<!--v-html指令：用于输出html代码；-->
<p v-html="content"></p>
<!--v-bind指令：绑定HTML属性中的值，v-bind:后跟属性名，在data里再设置该内容，例：v-bind:href="url"，可以缩写为:href="url"；-->
<label for="r1">修改颜色</label><!--label标签为 input 元素定义标记，for属性与id相同-->
<input id="r1" type="checkbox" v-model="use">
<p v-bind:class="{'class1':use}">{{red}}</p>
<!--v-if指令：当v-if="true"时执行标签里面的内容；-->
<template v-if="ok">
<p>if为true时显示</p>
</template>
<!--被包围在 pre 元素中的文本通常会保留空格和换行符-->
<pre>
<!--v-bind:href可以缩写为:href-->
<a :href="url">Runoob官网</a>
</pre>
<!--双向数据绑定：input框内容改变影响上面message的内容
比如在input、select、textarea、checkbox、radio等表单控件-->
<input v-model="message"><br>
<!--按钮监听DOM事件，v-on:click可以缩写为@click-->
<button v-on:click="reverseMessage">反转字符串</button>
<!--过滤器：使用管道符|标识，后面的过滤器函数对第一个参数进行操作；-->
<p>字符串首字母转大写：{{message|capitalize}}</p>
<!--if-else-if语句-->
<p v-if="number > 0.5">随机数大于0.5</p>
<p v-else-if="number === 0.5">随机数等于0.5</p>
<p v-else="number < 0.5">随机数小于0.5</p>
<!--v-show指令：类似于if语句，当v-show="true"时执行标签里面的内容；-->
<h1 v-show="ok">展示内容</h1>
<!--for循环遍历：遍历map集合请做参考-->
<ol>
<li v-for="site in sites">{{site.name}}：{{site.age}}</li>
</ol>
<p>{{reverseMessage3}}</p>
<!--vm.$watch：监听输入框里的内容，另一个输入框接着改变内容；-->
<p style="font-size: 25px">计数器：{{counter}}</p>
<button @click="counter++" style="font-size: 25px">点我</button>
<!--内联style样式，不推荐使用，经常使用一个变量来设置-->
<p :style="{color:activeColor,fontSize:fontSize+'px'}">菜鸟教程</p>
<button @click="say('Hello')">问候</button>
<!--事件修饰符：带点后的内容-->
<button @click.once="say('Hello')">问候只能点击一次</button>
<!--<button>点击enter问候</button>-->
<input @keyup.enter.space="say('Hello')" placeholder="选中输入框点击enter或者spce问候">
<p>单选框：</p>
<input id="java" type="radio" value="Java" v-model="radioName">
<label for="java">Java</label>
<input id="python" type="radio" value="Python" v-model="radioName">
<label for="python">Python</label>
<input id="c++" type="radio" value="C++" v-model="radioName">
<label for="c++">C++</label><br>
<span>选择的单选框内容为：{{radioName}}</span>
<p>多个复选框：</p>
<input id="java1" type="checkbox" value="Java" v-model="checkboxName">
<label for="java1">Java</label>
<input id="python1" type="checkbox" value="Python" v-model="checkboxName">
<label for="python1">Python</label>
<input id="c++1" type="checkbox" value="C++" v-model="checkboxName">
<label for="c++1">C++</label><br>
<span>选择的复选框内容为：{{checkboxName}}</span><br>
<!--下拉选框-->
<select name="webSite" v-model="selectedName">
<option value="">请选择一个网站</option>
<option value="www.csdn.com">CSDN</option>
<option value="www.github.com">GitHub</option>
</select>
<p>选择的网站为：{{selectedName}}</p>
<!--全局组件-->
<runoob></runoob>
<p>页面加载后，input元素自动获取焦点：</p>
<input v-focus>
<p v-runoob="{color:'green',text:'菜鸟教程！'}"></p>
<!--设置路由-->
<!--<p>
<router-link to="/foo">Go to foo</router-link>
<router-link to="/bar">Go to bar</router-link>
</p>
<router-view></router-view>-->
<!--过渡组件-->
<button v-on:click="show=!show">Velocity动画点我</button>
<!--过渡-->
<!--<transition name="fade">-->
<!--CSS 过渡-->
<!--<transition name="slide-fade">-->
<!--CSS 动画-->
<!--<transition name="bounce">-->
<!--自定义过渡-->
<!--<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
:duration="{enter:500,leave:800}">--><!--定制进入和移出的持续时间-->
<!--JS钩子：要在methods中编写对应的方法-->
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-show="show" v-bind:style="styleobj">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
<hr>
<!--axios：遍历json中的字段-->
<div v-for="site in info">
{{site.File_newName}}
</div>
<input type="button" @click="get()" value="点我异步获取数据(Get)">
<p style="font-size: 25px">计数器：{{products.id}}</p>
<button @click="products.id++" style="font-size: 25px">set设值点我</button>
</div>
<script>
Vue.directive('runoob', function (el, binding) {
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
})
Vue.component('runoob', {
template: '全局组件!
'
})
var myproduct = {"id": 1, name: "book", "price": "20.00"};
var data = {
message: 'this a variable',
url: 'http://www.runoob.com',
content: 'html输出内容
',
red: '我会变颜色',
use: false,
ok: true,
number: Math.random(),
sites: [
{name: 'Java', age: '8'},
{name: 'Python', age: '8'},
{name: 'C++', age: '8'},
{name: '.Net', age: '8'}
],
counter: 1,
activeColor: 'red',
fontSize: 25,
radioName: '',
checkboxName: [],
selectedName: '',
show: true,
styleobj: {
fontSize: '30px',
color: 'red'
},
info: null,
products: myproduct
}
var vm = new Vue({
el: '#app',
data: data,
computed: {
reverseMessage3: function () {
return 'reverseMessage3';
}
},
methods: {
detail: function () {
return 'details';
},
reverseMessage() {
this.message = this.message.split('').reverse().join('');
},
say(letter) {
alert(letter)
},
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',
translateX: '30px',
translateY: '30px',
opacity: 0
}, {complete: done})
},
get: function () {
this.$http.get('/try/ajax/ajax_info.txt').then(function (res) {
document.write(res.body);
}, function () {
console.log('请求失败处理');
});
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
},
mounted() {
axios
.get('https://www.91cht.com/woxiang/control/bapi?operFlag=showStoreImg&Meta_storeNo=06096519')
.then(response => (this.info = response.data.StoreImgList)
).catch(function (error) {
console.log(error);
});
}
})
document.write(vm.url === data.url)
document.write('')
document.write(vm.$data === data)
vm.$watch('counter', function (dest, source) {
alert('原来的值：' + source + '，变为：' + dest);
});
setTimeout(function () {
vm.counter += 20;
}, 10000);
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write('
' + '欢迎来到混入实例');
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
Vue.set(myproduct, 'name', 'xhy');
console.log(vm);
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function (nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
</body>
</html>
