《前端主流框架应用》课件-2 Vue程序

第一个Vue程序2.1Vue程序的一般结构Vue实例插值表达式一、Vue简介Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架。Vue.js是基于MVVM模型的双向数据绑定的JavaScript库。Vue的核心是MVVM中的ViewModel，负责连接View和Model。既可以监听视图层数据的变化，也可以绑定模型层的数据到视图。关键词Model（数据模型）View（视图）ViewModel（视图模型）一、Vue简介1、页面使用：链接vue.js文件独立版本：下载到本地目录，然后使用<script>标签引入。<scriptsrc="./js/vue.js"></script>cdn方式引入：：</script>2、项目中使用：装包NPM方法npminstallvue-gyarn方法yarnaddvue-g二、Vue程序的一般结构第一步：新建一个html文件，导入Vue.js第二步：在页面中定义一个用于显示网页内容的DOM区域。（被Vue应用实例作用的）或者使用cdn引入<divid="app"></div>二、Vue程序的一般结构第三步：通过new关键字以及Vue({})构造函数，创建Vue实例Vue构造函数的参数为一个对象，包含很多成员，都是Vue实例的选项成员。<script>varvm=newVue({//选项成员})<script>实例化选项成员说明el挂载点data数据成员…………<script>varvm=newVue({el:'#app',//挂载点data:{//数据message:'HelloWorld'}})</script>实例化二、Vue程序的一般结构第四步：使用Vue的语法，显示数据到挂载点对应的DIV中。<divid="app">

<!--将msg绑定到p元素--><p>{{message}}</p></div>插值语法：{{JavaScript表达式}}当页面渲染时，模板中的{{数据名}}会被替换为实际的数据二、Vue程序的一般结构完整代码三、Vue实例创建Vue实例时，需要用对象作为Vue构造函数的参数，参数中列举各个选项。如el、data、methods等。选项成员说明el挂载点data数据成员methods方法computed计算属性…………三、Vue实例el:挂载点：决定Vue实例的作用范围。必须有的成员。Vue实例的作用范围是什么呢？是el对应的DOM元素及后代元素是否可以使用其他的选择器？可以是其他的选择器，建议用ID选择器三、Vue实例data：Vue中的数据存储在这里。以键值对的方式，组合成一个对象。data对象中存储的数据，是可以在插值表达式中直接被访问的。data对象中可以存储任何类型的数据。三、Vue实例插值表达式：{{}}这是Vue中特有的文本数据绑定的模板语法，可以把Vue实例中的数据，显示到页面视图中。小结本节介绍了第一个Vue程序的结构、vue实例的创建以及插值表达式的使用。Vue中的选项成员2.2方法计算属性监听一、方法methodsVue实例常用选项成员：选项说明el挂载点，唯一根元素dataVue实例数据对象methodsVue实例中的方法computed计算属性watch监听数据变化的成员一、方法methodsmethods属性用来集中定义方法，其值为一个对象。可以定义多个javascript方法，方法定义之间用逗号分隔。通过Vue实例可以直接访问这些方法。在定义的方法中，如果访问data的数据，可以直接通过this.属性名的形式来访问。this指向Vue实例本身。定义在methods属性中的方法可以作为页面中的事件处理方法被调用。

methods定义方法

基本语法：

ES6方法化简格式传统js键值对格式一、方法methods事件绑定：在Vue中，v-on指令用来监听事件，即为元素绑定事件。语法格式：

v-on:事件名="方法调用或表达式"如果被调用方法没有形参，那么调用方法的（）可以省略。<divid="app"><button

v-on:事件名="方法(实参)">点击</button></div>这里是方法名或者语句表达式事件绑定指令v-on绑定的方法必须在vue实例methods成员定义。v-on:可以简化为@案例：点击按钮，年龄增长点击按钮，页面中年龄增加1。v-on绑定事件格式可以化简为：@事件名<divid="app"><h1>姓名：{{name}}</h1><h2>年龄：{{age}}</h2><!--绑定单击事件--><buttonv-on:click="age++">年龄增长</button></div>varvm=newVue({el:'#app',data:{name:"张三",age:18}});初始页面结构定义vm实例<divid="app"><h1>姓名：{{name}}</h1><h2>年龄：{{age}}</h2><!--绑定单击事件--><button@click="age++">年龄增长</button></div>初始页面结构案例：点击按钮，页面文字变化当你点击按钮时，页面上显示的消息会更新。<divid="app">

<!--为button按钮绑定click事件-->

<button@click="showInfo">请单击</button>

<p>{{msg}}</p></div>varvm=newVue({el:'#app',data:{msg:'好好学习，天天向上'},methods:{

//定义事件处理方法showInfoshowInfo:function(){this.msg='Daydayup，goodgoodstudy!'}}})初始页面结构定义vm实例综合案例：计数器点击按钮减一，减到0不再减了点击按钮加一，加到10不再加了二、计算属性computedcomputer，即计算属性，也是Vue的选项成员。computer用来集中定义计算属性，其值为一个对象。当有一些数据需要随着其他数据变动而变动时，就需要用computed计算属性来定义。计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。语法格式：计算属性表面形式是方法，必须有返回值。案例：用计算属性显示总金额点击按钮，数量增减，总金额跟着变化。总金额=单价*数量var

vm=newVue({el:'#app',data:{price:20,

num:0},computed:{

totalPrice:function(){//总价格returnthis.price*this.num

}}})<divid="app"><p>总价格：{{totalPrice}}</p><p>单价：{{price}}</p><p>数量：{{num}}</p><div><button@click="num<=0?0:num--">减少数量</button><button@click="num++">增加数量</button></div></div>计算属性表面是方法,本质是属性！三、监听watch数据监听器（watch）：作用：用来监测Vue实例中的数据变动。watch的值为一个对象，可以定义多个监听。监听是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。对数据进行监听，一旦数据发生变化，则触发相应函数的执行，以达到改变其他数据的目的。语法格式：watch:{

//要监视的数据变量名:回调函数

//newValue是变量的新值，oldValue是旧值

变量名：function(newValue,oldValue){

}}watch:{

变量名(newValue,oldValue){

}}案例：监听字符串变量的值的变化用watch监听变量msg的变化，控制台中输出消息。在浏览器的控制台中查看运行效果：watch监测的是数据变量的变化，watch的方法名必须与data中的变量名一致。watch选项补充：v-modelv-model指令是双向数据绑定指令，用于将表单元素与Vue中的变量形成双向绑定关系。这样，你可以通过页面，操作表单元素，就可以修改vue中的数据变量。双向绑定后，可以把数据从视图层传递到模型层。案例：应用监听计算人民币与美元换算。

应用监听属性实现人民币和美元之间的汇率换算