0
点赞
收藏
分享

微信扫一扫

Vue指令文件

<!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/animate.css@3.5.1" 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 /* .fade-leave-active, 2.1.8 版本以下 */
{
opacity: 0
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
/*CSS 过渡*/
.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;
}

/*CSS 动画*/
.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
})
/*注册一个全局自定义指令 v-focus*/
/*Vue.directive('focus',{
/!*当绑定元素插入到 DOM 中*!/
inserted:function (el) {
/!*聚焦元素*!/
el.focus()
}
})*/
/*必须放到vue变量之前*/
Vue.component('runoob', {
template: '<h1>全局组件!</h1>'
})
var myproduct = {"id": 1, name: "book", "price": "20.00"};
/*使用vm调用变量和直接调用变量一样,为了方便都是直接调用,不使用vm来调用*/
var data = {
message: 'this a variable',
url: 'http://www.runoob.com',
content: '<h1>html输出内容</h1>',
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)
},
/*Velocity.js方法*/
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 () {
/*http://localhost:63342/try/ajax/ajax_info.txt*/
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: {
/*注册一个全局自定义指令 v-focus*/
focus: {
/*当绑定元素插入到 DOM 中*/
inserted: function (el) {
/*聚焦元素*/
el.focus()
}
}
},
/*axios*/
/*axiosData() {
return {
info: null
}
},*/
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) // true
document.write('</br>')//换行
/*$表示获取冒号前的内容*/
document.write(vm.$data === data) // true
vm.$watch('counter', function (dest, source) {
alert('原来的值:' + source + ',变为:' + dest);
});
/*setTimeout 设置 10 秒后计算器的值加上 20*/
setTimeout(function () {
vm.counter += 20;
}, 10000);
/*定义路由*/
/*const Foo={template:'<div>foo</div>'}
const Bar={template:'<div>bar</div>'}
/!*定义路由组件*!/
const routes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
const router=new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')*/
/*定义一个混入对象*/
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write('<br>' + '欢迎来到混入实例');
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
// vm.products.qty = '1';
/*set方式设置值*/
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>


举报

相关推荐

VUE-指令

Vue指令

vue指令

Vue 基础指令

Vue常见指令

Vue-指令

vue常用指令

vue指令大全

vue 指令(二)

0 条评论