Vue基础

Vue基础学习
Vue的优势：
轻量级、简单易上手、双向数据绑定、学习成本低、跨平台
引入Vue的方法：
下载vue.js后通过script引入

CDN方法

Vue语法

{{message}}

new Vue({ el:"#app"//element的缩写，唯一根元素，后面跟该div的id或class名 data：{ message："hellow world"//定义数据 } })

Vue中的属性：
data //Vue实例数据对象
methods //定义Vue实例中的方法
components //定义方法
compuled //计算属性
filters //过滤器
el //唯一根元素
watch //侦听属性
methods：
methods用来定义方法
语法：

methods:{
show:(){
this.name=“hellow”
}//show为方法名
}
<button @click=“show”>

计算属性：

computes:{
reverse Message:function(){
retern this.split(’’),reverse().join(’’)
}
}

v-for：循环
语法：

• //item 值名，list数组名

v-if：值为true时显示，为false时消失
语法：

• data:{ flag:true }

  v-if和v-show的区别：v-if为false时是直接消失，v-show为false时是改变display:none
  ————————————————
  版权声明：本文为CSDN博主「weixin_45746823」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
  原文链接：https://blog.csdn.net/weixin_45746823/article/details/106167325