需要对HTML、CSS和JavaScript有一定的了解
<script>
引入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
html
中使用<script>
标签引入<script>
var app = new Vue({
// 选项
})
</script>
el
属性和data
属性<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue"
}
})
</script>
<div id='app'>
{{ message }} // {{}} 为插值表达式
</div>
el
:挂载点(设置Vue实例挂载的元素)el
元素命中的内部,在外部无效// 在外部无效
<div id=“app”></div>
{{ message }}
// 内部有效
<div id=“app”>
{{ message }}
</div>
// 可嵌套
<div id=“app”>
{{ message }}
<h2>{{ message }}</h2>
</div>
id
选择器// id选择器
<div id=“app”>
{{ message }}
</div>
// class选择器
<div class=“app”>
{{ message }}
</div>
<div>
标签// div标签
<div id=“app”>
{{ message }}
</div>
// span标签
<span id="app">
{{ message }}
</span>
data
:数据对象data
中<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue",
campus: ["a", "b", "c"] // 数组类型
}
})
</script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue",
},
methods: {
add: function() {
return this.message + "!!!";
}
}
})
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。