vue的CDN用法
CDN用法比较简单,只需要引入vue的js文件就可以开始开发。<script type="text/javascript" src="https://unpkg.com/vue"></script>下面使用一些vue常用的特性一:数据绑定HTML代码首先创建一个容器名字叫vue-app,然后绑定name
·
CDN用法比较简单,只需要引入vue的js文件就可以开始开发。
<script type="text/javascript" src="https://unpkg.com/vue"></script>
下面使用一些vue常用的特性
一:数据绑定
HTML代码
首先创建一个容器名字叫vue-app,然后绑定name这个变量,在HTML中渲染出来
<div id="vue-app">
// 以后所有的内容都写在这个容器里面
<h1>{{name}}</h1> // 绑定name这个数据
</div>
js代码
// 实例化vue对象
new Vue({
el:"vue-app",
data:{
name:"hello vue"
}
})
二:函数的使用
HTML代码
// 先创建一个容器和上面一致
<div id="vue-app">
<button on:click="updateName">修改name数据的值</button>
<h1>{{name}}</h1>
</div>
js代码
// 实例化 vue对象
new Vue({
el:"vue-app",
data:{
name:"hello vue"
},
methods:{
updateNmae:function(){
this,name = '修改后的hello vue'
}
}
})
三:数据的双向绑定
HTML代码
// 数据双向绑定用到v-model这个属性
<div id="vue-app>
<input type="text" v-model="name" >
<span>{{name}}</span>
</div>
js 代码
// 实例化vue对象
new Vue({
el:"vue-app",
data:{
name:"hello vue"
},
})
更多推荐
已为社区贡献1条内容
所有评论(0)