Vue.js 学习之路（一）
Vue.js 学习之路（一）
-
(Demo) Hello Vue!
-
Vue.js CDN
https://www.bootcdn.cn/ -
插值语法{{msg}}，数据，js表达式
-
指令：@click（点击事件），v-bind:href（事件绑定）
-
计算属性:computed
-
侦听器:watch
index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="index.js"></script>
</body>
</html>
index.css
html,
body {
margin: 5px;
padding: 0;
color: blueviolet
}
index.js
new Vue({
el: '#app',
data: {
msg: 'hello vue!!!',
},
})
index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>
{{ msg }}
</div>
<div v-html="template">
{{template}}
</div>
<div>
<a v-bind:href="url">Github</a>
<button type="button" @click="submit()">plus num</button>
{{counter}}
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.css
html,
body {
margin: 5px;
padding: 0;
color: blueviolet
}
index.js
new Vue({
el: '#app',
data: {
msg: 'hello vue!!!',
counter: 0,
template: "Dream big",
url: "https://github.com/ceezyyy",
},
methods: {
submit: function () {
this.counter++
}
}
})
index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>
{{msg1}}
</p>
<div>
{{ msg }}
</div>
<div v-html="template">
{{template}}
</div>
<div>
<a v-bind:href="url">Github</a>
<button type="button" @click="submit()">plus num</button>
{{counter}}
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.css
html,
body {
margin: 5px;
padding: 0;
color: blueviolet
}
index.js
let app=new Vue({
el: '#app',
data: {
msg: 'hello vue!!!',
another:'another hello vue!!',
counter: 0,
template: "Dream big",
url: "https://github.com/ceezyyy",
},
watch:{
msg:function(newval,oldvar){
console.log('newval is:'+newval),
console.log('oldvar is:'+oldvar)
}
},
computed:{
msg1:function(){
return 'computed: '+this.msg+this.another
}
},
methods: {
submit: function () {
this.counter++
}
}
})
