第一个Vue程序
1.导入Vue.js
//入门版教程，借助 script 标签直接通过 CDN 来使用 Vue <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
或者使用任何提供 npm 包服务的 CDN，例如：
https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.cjs.js
也可以下载此文件并自行提供服务。
注意：通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
2.new 一个vue对象
3.绑定一个元素
4.放数据
5.从模板里取出来
<!--View层 模板-->
<div id="app">
{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.cjs.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>Vue基本语法
v-bind
使用v-bind来绑定元素特性！
v-开头的被称为指令
v-bind这个指令的意思是“将这个元素节点的title特性和Vue实例的message属性保持一致
<!--View层 模板-->
<div id="app">
<span v-bind:title="message">鼠标悬停在此处，可以查看动态绑定的信息</span>
</div>
<!--导入vue.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.cjs.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>v-if、v-else
<!--View层 模板-->
<div id="app">
<h1 v-if ok==="hoan">我是true</h1>
<h1 v-else>我是flase</h1>
</div>
<!--导入vue.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.cjs.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
ok: "hoan"
}
});
</script>v-for
<!--View层 模板-->
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.cjs.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
items:[
{message: "我是itme1"},
{message: "我是itme2"}
]
}
});
</script>methods
<div id="app">
<button v-on:click="hello">click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.cjs.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message: "我是Vue"
},
methods:{
//方法必须定义在Vue的method对象中
hello:function (event){
alert(this.message);
}
}
});
</script>
