Web全栈开发案例教程课件 第7章 Vue基础

Web全栈开发案例教程第7章Vue.js前端开发内容简介最简单的Vue程序一vue绑定数据实现动态效果二v-if和v-for指令三vue中的事件处理四vue组件的注册和使用三五7.1Vue使用基础Vue.js是一套用于Web前端开发的JavaScript渐进式框架。Vue通过虚拟DOM技术来避免对DOM的直接操作；通过尽可能简单的API来实现响应式的数据绑定，并支持单向和双向数据绑定。。Vue的核心是数据驱动和视图组件。Vue.js采用MVVM（Model-ViewModel-Model）模式，将前端代码分离为视图和数据两部分，从而不需要直接操作DOM。7.1.1引入Vue3.xVue的官方网站是/，在该网站上单击“安装”链接方式1：CDN方式引入<scriptsrc="/vue@3/dist/vue.global.js"></script>方式2：下载下来再引入<scriptsrc="./js/vue.js"></script>

Vue3.x和Vue2.x完全不兼容。Vue2.x程序的特征是用newVue({})声明Vue实例第一个Vue程序<divid="app">{{msg}}</div><script>const{createApp}=VuecreateApp({data(){return{msg:"HelloVue" }}}).mount('#app')</script>从全局对象Vue获取createApp方法。用createApp方法创建Vue应用实例。第12-14行的data函数用于声明组件初始响应时状态。所有会用到的顶层数据属性都应该提前在这个对象中声明。msg属性对应第8行代码中定义的数据绑定对象{{msg}}将该应用实例挂载到一个容器元素#app中，这样Vue实例就和id为app的元素绑定在一起（该元素称为挂载点）。可见，Vue程序不涉及到任何DOM操作，如获取元素，设置元素内容等。Vue程序和原生Javascript程序的区别Javascript程序：含有大量DOM操作，如获取元素，设置元素内容等。Vue程序：不涉及到任何DOM的操作，如获取元素，设置元素内容等。而着重于定义数据变量，绑定数据等。从而实现数据和视图分离使用Vue模板<divid="app"></div><script>const{createApp}=VuecreateApp({template:'<h1>{{msg}}</h1>',data(){

return{msg:"HelloVue" }}}).mount('#app')</script>在实例里面指定了挂载点和模板后，Vue会自动结合模板和数据，生成内容，然后把内容放在挂载点之中。模板指的是挂载点内部的内容。模板中只能有1个根元素。将模板写在<script>标签中<divid="app"></div><scripttype="x-template"id="tem3"><h1>{{msg}}</h1></script><script> const{ createApp}=Vue createApp({ template:'#tem3',

data(){

return{ msg:"HelloVue" } } }).mount('#app')</script> <!--在这里写模板元素-->将模板写在<template>标签中<divid="app"></div><templateid="tem2"><h1>{{msg}}</h1> <!--在这里写模板元素--></template><script>const{ createApp}=Vue createApp({ template:'#tem2', data(){ return{ msg:"HelloVue" } } }).mount('#app')</script>这两种方法仍需要在Vue实例中定义template属性，并将其属性值设置为template元素的id值7.1.4插值表达式<divid="app"><h2>标题：{{title}}</h2><!--以下是表达式--><p>反转：{{title.split('').reverse().join('')}}</p><p>年龄：{{age+10+'岁'}}</p><p>所在城市:{{info.split("-")}}</p><p>{{age>=18?"成年人":"未成年人"}}</p></div><script>const{createApp}=Vue;createApp({data(){return{title:'船山故居',info:"湖南-衡阳",age:60};},}).mount("#app");</script>插值表达式是用一对双花括号“{{}}”将变量、数字、字符串或表达式等内容括起来的式子。其作用是将DOM元素绑定到Vue实例的数据，从而将双花括号内的变量替换为对应的属性值用文本渲染指令v-text代替插值表达式<divid="app"><pv-text="msg">原来的内容</p><!--等同于插值语法--><pv-html="msg"></p><!--解析HTML代码--></div><script>const{createApp}=VuecreateApp({data(){return{msg:'<h3style="color:red">hello</h3>'}}}).mount('#app');</script>插值表达式在页面还没加载完成时会短暂显示“{{msg}}”，造成页面闪烁，这是因为插值表达式会显示虚拟DOM，如果不想出现该情况需要借助v-cloak遮罩指令。而v-text不会显示虚拟DOM，因此不存在该问题7.2Vue交互效果的实现Vue主要是通过事件改变绑定的数据（data的内容）实现动态效果的。7.2.1Vue事件绑定在Vue中，要为元素绑定事件，先给该元素添加“v-on:事件名”，v-on:可简写成@。再在Vue实例中添加methods属性，在该属性中编写事件处理函数。handle是自定义的事件处理函数名。为元素添加事件和事件处理函数<divid="app"><h2v-on:click="handle">{{msg}}</h2><!--可简写成@click--></div><script>const{createApp}=Vue;createApp({data(){return{msg:"Vue.js",};},methods:{handle(){alert(`Hello${this.msg}!`);},

},}).mount("#app");</script>//当单击h2时弹出警告框methods用于声明要混入到组件实例中的方法，所有事件处理函数都应该放入到methods:{}中。注意不能为Vue中的根元素#app绑定事件。【例7-8】单击h2元素时改变元素中的文本内容<divid="app"><h2v-on:click="handle">{{msg}}</h2><!--可简写成@click--></div><script>const{createApp}=Vue;createApp({data(){return{msg:"Vue.js",};},methods:{

handle(){this.msg="World"},},}).mount("#app");</script>要改变元素的内容，只需改变data属性的内容即可，this.msg指的是vue实例data中msg变量的值。this指代绑定的元素。7.2.2Vue属性绑定（v-bind指令）<divid="app"><h2v-bind:title="tip"v-on:click="handle">船山研究</h2><h3:title=“tip”@click=“handle”>{{msg}}</h3><!--简写v-bind--></div><script>const{createApp}=Vue;createApp({data(){return{tip:"湖南衡阳",msg:"王船山"};},methods:{handle(){this.tip="湘西草堂",this.msg="王夫之"},},}).mount("#app");</script>>只要在HTML属性前加v-bind:，那么该属性就可使用data中的变量值作为属性值，如果要动态改变该属性值，只要为元素用v-on:绑定相应事件，动态改变data变量值即可。v-on:可缩写成@v-bind:可缩写为:绑定属性实例——会变的图片<divid="app"><h2id="root"v-on:click="handle">{{msg}}</h2><imgv-bind:src="picsrc"id="pic1"/></div><script>const{createApp}=Vue;createApp({data(){

return{picsrc:"images/pic1.jpg",msg:"会变的图片"};},methods:{handle(){

this.picsrc="images/pic2.jpg",this.msg="看到变化了吗"},},}).mount("#app");</script>用Vue实现hover效果<divid="app"><h2id="root"@mouseenter="handle"@mouseleave="handle1">{{msg}}</h2><imgv-bind:src="picsrc"id="pic1"/></div><script>const{createApp}=Vue;createApp({data(){return{picsrc:"images/pic1.jpg",msg:"会变的图片"};},methods:{handle:function(){this.picsrc="images/pic2.jpg"},handle1:function(){this.picsrc="images/pic1.jpg"}},}).mount("#app");</script>使用mouseenter和mouseleave来模拟hover事件【例7-12】用Vue改变元素的CSS样式<divid="app"><h2id="root"v-bind:class="active?yes:no"@click="handle">

船山书院</h2><p:style="setfont">船山书院位于衡阳东洲岛上……</p></div><script>const{createApp}=Vue;createApp({data(){return{active:false,yes:"active",no:"normal", setfont:{fontSize:'14px',color:'green'}};},

methods:{handle:function(){this.active=!this.active},},}).mount("#app");</script>事件修饰符事件修饰符是在事件名后加一个圆点“.”和后缀，利用事件修饰符对事件处理加以限制。常用的事件修饰符：.stop：阻止冒泡,即在子元素触发事件时，阻止执行父元素的事件处理程序。.prevent：阻止默认事件的行为.capture：使用capture模式添加事件监听器.self：只在当前元素本身触发事件.once：只触发一次【例8.14】事件修饰符的应用。用v-model实现双向数据绑定

<divid="app">

姓名：<inputtype="text"v-model="name"placeholder="你的名字"><h2>您好，{{name}}</h2></div><script>const{createApp}=Vue;createApp({data(){return{name:null}}}).mount("#app");</script>有时希望用户在表单中输入或修改内容时，表单中的内容能实时地显示在其他网页元素中。这时可使用双向数据绑定用计算属性computed实现计算商品总价

<divid="app"> <h2>总计：{{total}}元</h2><p>单价：{{price}}元</p> <p>件数：{{counter}}<buttonv-on:click="decre">-</button>

<buttonv-on:click="incre">+</button></p></div><script>const{createApp}=Vue;createApp({

data(){

return{counter:1,price:6.8}},

methods:{incre(){this.counter++ },

decre(){if(this.counter>0)this.counter--}},

computed:{total:function(){

returnthis.price*this.counter}} }).mount("#app");</script>computed叫做计算属性，能够对多个属性的值进行各种运算7.2.4v-if和v-for指令7.2.4v-if和v-for指令v-if指令是会根据表达式值的真假，切换元素的存在与否，其实是在操作dom元素。v-show指令与其相似，但v-if控制DOM元素的存在与否，而v-show是控制DOM元素的显示与否。用v-if指令切换元素的显示和隐藏<divid="app">您有宠物吗？有：<inputtype="checkbox"name="hasBoy"id="hasBoy"value="1"@click="handle"/><templatev-if="ok"><br/> 有几只<inputtype='text'name='textfield'size="10"/><button>确定</button></template></div><script>const{createApp}=Vue;createApp({data(){return{ok:false}},methods:{handle:function(){this.ok=!this.ok;}}}).mount("#app");</script>如果有多个元素需要同一个元素控制的时候，可以将多个元素放在一个template中，在使用template时，v-show将失去作用。因为v-show是设置显示与隐藏，而template是没有实际东西的Dom，所以v-show对于template是无效的。用v-if切换用户登录类型<script>const{createApp}=Vue;createApp({data(){return{type:'name',ok:false}},methods:{handle:function(){this.type=this.type==='name'?'mail':'name';}}}).mount("#app");</script><divid="app"><templatev-if="type==='name'"><label>用户名：</label><inputplaceholder="输入用户名"type="text"size="10"></template><templatev-else><label>手机号码：</label><inputplaceholder="输入手机号"size="10"></template><button@click="handle">切换登录方式</button></div>列表渲染指令v-for

<divid="app"><ul><liv-for="bookinbooks">《{{}}》</li></ul></div><script>const{createApp}=Vue;createApp({data(){return{books:[{name:'电子商务安全'},……{name:'大数据分析实用教程'}]}}}).mount("#app");</script>列表渲染也支持用of来代替in作为分隔符v-for是列表渲染指令，它的表达式需结合in来使用7.2.5Vue组件组件（component）是一个拥有预定义选项的一个Vue实例，一般由视图模板和Vue实例代码组成。注册组件方式：全局注册组件、局部注册组件。1、全局注册组件Vponent(tagName,{options//配置选项})参数：tagName为组件名，在页面中引用组件时，把组件名作为一个元素标签形式来引用组件。options为配置选项，其大部分选项与Vue实例构造方法的选项相同。但组件的data选项是函数形式，而Vue实例的data选项是对象形式。另外，在组件中不用el选项。props选项实现父组件向子组件传递数据。用列表操作实现todolist效果所谓todolist是指，当单击提交按钮，就将用户在文本框中输入的内容添加到下方的无序列表中【例7-18】用列表操作实现todolist效果【例7-19】用Vponent创建组件的方法实现todolist用列表操作实现todolist效果【例7-19】用Vponent创建组件的方法实现todolist<script>const{ createApp}=Vue;constapp=createApp({data(){

return{ inputValue:'',list:[] }},methods:{

handleSub:function(){

this.list.push(this.inputValue)

this.inputValue='' }

} }) ponent('todo-item',{ props:['content'], template:`<li>{{content}}</li>` }) app.mount("#app");</script>向Vue中的组件传递数据需要用到props选项，需要传递给组件的数据必须在其props列表中声明，其取值可以是数组或对象。7.3Vue与Node.js的结合7.3.1使用构建方式创建Vue项目Vue支持构建方式创建Vue项目，这种方式要求先安装Node.js。常用的Vue构建工具有VueCLI和V