转载请注明出处，谢谢
Vue入门系列友情链接:
Vue基础框架（入门）--------当前文章
Vue常用指令（入门）
vue2.x 基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue基础</title>
</head>
<body>
<div id="app"> //为挂载的Vue对象创建一个容器
{{ message }} //插值表达式（渲染数据）
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({ //创建应用程序 (创建vue实例)
el:"#app", //挂载Vue对象
data:{ //响应式数据
message:" Hell Vue !"
},
methods: { // 定义方法
},
created() { //如果想在页面初始化的时候发送请求 基本上都是在这里发送的
},
computed:{ // 定义计算属性
getMsg(){ // 计算属性本质上也是一个函数 定义时和方法一样
console.log("计算属性执行了");
}
},
watch:{ //在此处定义监听器
}
})
</script>
</html>
常用属性介绍
el:Element 元素 把渲染的内容展示到此容器
data:{} 在data声明的属性,都是响应式数据,只要data中的数据发生变化, 视图就会立即更新,称为vue响应式数据
methods:{} 定义方法
computed:{} 定义计算属性
watch:{} 监听器/侦听器, 以函数的形式定义 名称就是监视的数据的名称 参数就是数据变化之后的新值
created（） 是生命周期一个 用来发送网络请求(页面刚加载出来时需要的数据)
vue3.x 基本结构：
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<button>-</button>
<button>{{num}}</button>
<button @click="add">+</button>
</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.global.js'></script>
</script>
<script>
const app = Vue.createApp({
data() {
return {
num: 0
}
},
methods: {
add() {
this.num++
}
},
})
app.mount('#app')
</script>
</html>
转载请注明出处，谢谢
