这个时候我还没学路由…
直接上使用的代码部分
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
/*import router from './router'*/
Vue.config.productionTip = false
Vue.filter('myreverse',function(value){
return value.split('').reverse().join('');
})
/* eslint-disable no-new */
new Vue({
el: '#app',
/* router,*/
components: { App },
template: '<App/>'
})
由于没使用router被我注释了，
filter是过滤器，这里是全局定义方法，后面会介绍，其他都是模版的代码。
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<br/>
<hi></hi>
<mytest></mytest>
<pop></pop>
</div>
</template>
<script>
import hi from './components/hi'
import mytest from './components/mytest'
import pop from './components/pop'
export default {
name: 'App',
components:{hi,mytest,pop}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在template模版里根节点只运行存在一个div，那三个奇怪名字的是我自定义的三个页面（块）
<template>
<div>
<input v-model="message" placeholder="input message" />
<input v-model="checked" type="checkbox" id="checkbox1" value="checkbox11">11</input>
<input v-model="checked" type="checkbox" id="checkbox2" value="checkbox22">22</input>
<br/>
<select v-model="selected">
<option disable value="">请选择</option>
<option>AA</option>
<option>BB</option>
<option>CC</option>
</select>
<br/>
<select v-model="selected1" style="width: 50px;">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<br/>
<input type="radio" name="name" v-model="pick" value="a" /><label>a</label>
<br/>
<input type="radio" name="name" v-model="pick" value="b" /><label>b</label>
<br/>
<input type="radio" name="name" v-model="pick" value="c" /><label>c</label>
<br/>
<br/>
<br/>
<br/>
<span>Message is:{{message}}</span>
<br/>
<span>Message is:{{checked}}</span>
<br/>
<span>select is : {{selected}}</span>
<br/>
<span>select is : {{selected1}}</span>
<br/>
<span>radio is : {{pick}}</span>
<br/>
<span>reverse is :{{message|myreverse}}</span>
<br/>
<span>up is :{{message|capitalize}}</span>
<br/>
<span>myfilter3 is :{{message|myfilter('haha')}}</span>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
message: '',
checked: [],
selected:'',
options:[
{text:"AA",value:'A'},
{text:"BB",value:'B'},
{text:"CC",value:'C'}
],
selected1:'',
pick:''
}
},
filters:{
myfilter:function(value,value1){
return value.charAt(0).toLocaleUpperCase()+value.slice(1)+value1;
}
}
}
</script>
实际效果
这里注意在使用键值对时，value值才是选中的值，text值是选择框里的值。v-for可以对这种数组进行遍历…还有一些对字符串操作的方法等等…
<template>
<div>
<div>
<h1>There is mytest part----</h1>
<button v-on:click="count=count+1">addit</button>
<span>{{count}}</span>
<button v-on:click="sayhaha">SAYhaha</button>
<button v-on:click="sayxixi">SAYxixi</button>
</div>
<br/>
<div id="demo" @click="commonAlert">
<button @click.stop="alertA">内部标签</button>
<br>
<span>哈哈哈</span>
</div>
<br/>
<a href="https://www.baidu.com" @click.prevent="preventWebJump">百度一下</a>
<br/>
<div @click.capture="aa">
<div @click.capture="bb">
<Button @click.capture="cc">冒泡</Button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'mytest',
data () {
return {
count:1
}
},
methods:{
sayhaha:function(){
alert("hahaha")
},
sayxixi:function(){
alert("xixixi")
},
commonAlert:function(){
alert("outclick!")
},
alertA:function(){
alert("innerClick!")
},
preventWebJump:function(){
alert("禁止跳转")
},
cc:function(){
alert("cc")
},
bb:function(){
alert("bb")
},
aa:function(){
alert("aa")
}
}
}
</script>
<!--.once.passive.self-->
实际效果
这里主要对事件处理方法进行了一些测试，还包括一些事件修饰符，实际效果用图片表现不出事件特性。
这里还有.once（指定事件只触发一次）.passive（和prevent相反，允许标签自带的事件）.self（冒泡事件时，不直接与该控件交互的事件会被跳过，不同于.stop是冒泡到该事件时停止）
<template>
<div id="demo">
<button v-on:click="greet =!greet">点击</button>
<transition name="fade">
<p v-show="greet">hello world jack!</p>
</transition>
</div>
</template>
<script>
export default{
name:'pop',
data(){
return{
greet:true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
vue定义过渡，transition标签（name=fade）内的控件在消隐时可以通过css定义过渡动画，配合三方css文件，可以达到很有意思的效果。
参考
还有键盘输入事件绑定…
参考
很多点没提到，在之后的学习中再补上吧~