首先来说vue的作者是中国人,叫尤雨溪。vus.js官网这里面有详细的介绍;我写这个的目的是记住这些知识点,如果有人误踩坑可以点击官网看看也是一种收获。
首先来说vue的引入方式:
第一种是直接在本地html中引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
这里我是将
https://unpkg.com/vue/dist/vue.js链接在google里打开然后Ctrl+s 保存到本地文件然后放到js文件夹中直接在本地引用。
<script type="text/javascript" src="js/vue.js">
首先要搭建一个vue环境。
<div id="app">
{{message}}
</div>
var app= new Vue({
el:'#app',
data:{
message: 'hello vuejs',
seen: true
},
methods:{
toggle:function(){
this.seen=!this.seen;
}
}
})
这里的var app=new Vue({
})中v必须是大写和原声js中声明一个新的数组,对象,是保持一致的,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.box{
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<input type="" name="" id="inp" v-model="message" v-bind:title="message">
<input type="" name="" v-bind:placeholder="message">
<div id="content" >
{{message}}
</div>
<button v-on:click="toggle">点击</button>
<button @click="toggle">点击</button>
<div class="box" v-if="seen"></div>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
</body>
</html>
<script >
var app= new Vue({
el:'#app',
data:{
message: 'hello vuejs',
seen: true
},
methods:{
toggle:function(){
this.seen=!this.seen;
}
}
})
</script>
<script >
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>