目录
安装
Vue框架分为开发版本和生产版本,两者的简答区别是开发版本主要运用于产品未上线,调试时使用比较方便;生产版本适合于产品发布。
官网提供的安装方式:1、直接通过script引用;2、CDN;3NPM。具体可以进官网参考文档
这里我采用的是利用script直接引用:在开发版本鼠标右击,另存为。然后在vscode中引用即可
<script src="../vue/vue.js"></script>
简单实例
先创建一个<div>;这里的{{}}双大括号是Mustache,就是一个解译的形式,可以将其中的至或者简单的运算显示出来,这个以后再议。
<div id="test">
<p>{{message}}</p>
<p>{{count}}</p>
<ul>
<li v-for="item in list_data">{{item}}</li>
</ul>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
引入Vue:创建一个Vue的对象test
const test = new Vue({})
其中el解释的是div的id=test,data和methods分别存的变量和方法;调用里面的变量可以用
this.
methods中可以定义多个方法,这里定义的是点击+按钮,count会加1,点击-按钮,coun会减1
<script src="../vue/vue.js"></script>
<script>
const test = new Vue({
el:'#test',
data:{
message:'这是一个Vue框架',
count:0,
list_data:['test1','test2','test3']
},
methods:{
add: function(){
console.log('add执行'),
this.count++
},
sub:function(){
this.count--
}
}
})
</script>
@click
代表鼠标单击事件,除了@click还有其他的形式:v-on表示监听
<button v-on:click="sub">-</button>
v-for
for循环,这里实现的是一个列表的形式:
声明: 本文章学习来源B站up主ilovecoding