vue Examples模板 通过script引入使用vue 非使用脚手架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="app">{{message}}</div>
</body>
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript">
Vue.component('myarticl',{
props:[],
template:``,
render:function(){},
data:function(){},
computed:{},
components:{},
methods:{},
watch:{},
mounted:{},
filters:{}
})
new Vue({
el:'#app',
data:{
num1: 12,
num2: 13.3,
}
computed:{
sum(){
return this.num1+this.num2
}
}
methods:{
plus(){
return this.num1+this.num2
}
}
watch:{
num(){
console.log('有变化了:' this.num1);
}
}
mounted:{
var _this=this;
this.productList.map(function (item) {
_this.$set(item, 'select', true);
})
}
directives:{
tack:{
inserted(el){
el.style.color='red'
}
},
focus: {
inserted: function (el) {
el.focus()
}
}
}
components:{
'my-article':{
props:['detail'],
template:`<div>
<div>
<h1>{{detail.title}}</h1>
<div>
<span>{{detail.date}}</span>
<span v-show="detail.is_original">原创</span>
</div>
</div>
<img :src="detail.cover_url" alt="">
</div>`
}
}
filters:{
toInt(value){
return parseInt(value);
}
}
})
</script>
</html>