Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（学习视频分享：vue视频教程）

一、安装vue

直接使用script标签引入

(相关资料图)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
登录后复制

二、Vue模板案例

步骤

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>{{title}}
{{name}}
<script>//3.1、定义js对象(根组件)const obj={//data():存放页面中存放数据的地方data(){return{title:"kobe",name:"cc"}}}//3.2、通过vue创建1个应用const app=Vue.createApp(obj)//3.3、将应用挂载到根节点（第二步中创建的盒子）app.mount("#app")</script>
登录后复制

三、基础模板（记住）

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>Vue.createApp({data(){return{}}}).mount("#app")</script>
登录后复制

四、vue的指令和插值

1、{{}}：插值表达式的语法

{{}}：可以在html中引用data中定义的数据

`{{name}}`

2、v-text：填充纯文本内容（data中的值）

效果和innerText一样

3、v-html：填充html（data中的值）

效果和innerHtml一样

4、v-pre：填充原始数据

防止vue对标签进行渲染（标签中写的什么，就显示什么）

显示两个花括号，中间为js：{{}}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>{{name}}
{{age}}
{{sex}}
info中的a1:{info.a1}
info中的a2:{info.a2}
显示两个花括号，中间为js：{{}}
<script>//obj是vue的组件对象const obj={//data方法（返回的是vue组件对象的属性）——》页面上要显示的数据全部放到这里data(){return{name:"2022",age:18,sex:"男",info:{a1:"66",a2:"88"},desc:"js
",arr:[8,24,23,24,25,66]}}}//3.2、通过vue创建1个应用const app=Vue.createApp(obj)//3.3、将应用挂载到根节点（第二步中创建的盒子）app.mount("#app")</script>
登录后复制

效果展示：

5、v-bind：属性绑定

语法： v-bind:属性=‘值’ 简写 :属性=‘值’

{{aInfo.title}}简写{{aInfo.title}}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>{{aInfo.title}}{{aInfo.title}}
<script>Vue.createApp({data(){return{aInfo:{title:"百度",addr:"http://www.baidu.com"}}}}).mount("#app")</script>
登录后复制

样式绑定

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>js
py
<script>Vue.createApp({data(){return{isjs:false,s1:{width:"300px",height:"200px",background:"red",}}}}).mount("#app")</script>
登录后复制

6、v-on：事件绑定

语法：v-on：事件名称=‘执行的方法’ 简写 @事件名=‘执行的方法’

简写

7、v-show：控制元素显示和隐藏的指令

控制元素显示隐藏的指令： v-show 值为True则显示，值为false为隐藏

py

例如

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>py
<script>Vue.createApp({//定义页面上显示数据的（组件的属性）data(){return{status:true}},//定义页面操作过程中调用的函数（vue组件的方法）//注意点：不要直接把方法定义为箭头函数methods:{switchShow(){//在方法中可以通过this获取组件中的数据//方法中的this代表组件中的对象this.status=!this.status}}}).mount("#app")</script>
登录后复制

8、v-model：数据的双向绑定

双向绑定只用于表单和组件页面修改数据会变，数据改变，页面也会改

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>账号:
密码:
<script>Vue.createApp({data(){return{user:"root",pwd:123456}},methods:{login(){//发送请求到后端，console.log("提交了登录")console.log(this.user,this.pwd)}}}).mount("#app")</script>
登录后复制

9、v-if、v-else-if、v-else：条件渲染

通过条件来控制元素是否渲染到页面

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>{{item}}
{{item}}
{{item}}
<script>Vue.createApp({data(){return{item:{case_id:1,title:"用例1",result:"success"},}}}).mount("#app")</script>
登录后复制

10、v-for：遍历对象、数组

案例：根据不同的结果，展示不同文字颜色

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>id title result 操作
{{item.id}} {{item.title}} {{item.result}} {{item.result}} {{item.result}} {{item.result}} 
<script>Vue.createApp({data(){return{cases:[{case_id:1,title:"用例1",result:"success"},{case_id:2,title:"用例2",result:"fail"},{case_id:3,title:"用例3",result:"error"},{case_id:4,title:"用例4",result:"success"},]}}}).mount("#app")</script>
登录后复制