02第2章第一个Vue.js应用（1-3节）

第2章：第一个Vue.js应用《Vue应用程序开发》

010203005Part12.1Vue.js的使用Part22.2实例及选项Part32.3数据绑定目录CONTENTS0Part42.4计算属性Part52.5生命周期Part62.6章节案例使用Vue.js的方式有很多，本章节介绍最常用的三种方式：1.<scriptsrc="Vue.js"type="text/javascript"></script>2.<scriptsrc="/ajax/libs/vue/3.5.13/vue.global.min.js"></script>3.通过npm安装提示：使用npm安装属于工程化的开发，在第7章Vue脚手架的时候再详细介绍。在第7章以前讲基础内容的时候，我们全部使用引入Vue.js文件的形式，在讲大项目的时候，我们全部使用vue-cli的工程化开发。2.1Vue.js的使用1.编辑器的选择2.

//ajax/libs/vue/3.5.13/vue.global.min.js提示：建议不要使用压缩过的js，虽然体积小，但是没有报错信息，对我们调试程序非常不利。2.1Vue.js的使用2.2实例及选项Vue.js应用的创建很简单，每个Vue应用都会通过createApp()函数创建一个新的应用实例，应用实例必须在调用了.mount()方法后才会渲染出来。创建Vue实例的代码如下：1.Vue实例2.2实例及选项模板（template）选项可以用其指定的模板内容渲染el选项所挂载的位置，原来的<div>标签会被替换为template选项中的<p>标签。实例代码如下：2.模版varapp=Vue.createApp({

template:"<p>template选项渲染的内容</p>",}).mount("#app")2.2实例及选项数据（data）选项是声明页面中可以使用的或者需要双向绑定的数据。通常，所有页面中需要用到的数据都会在data内声明，以避免数据因散落在业务逻辑中而难以维护，真正实现数据和视图的分离。data选项中的数据会存储在挂载的容器内或模板中，并通过一种特殊的语法（双大括号）使用，实例代码如下：3.数据<divid="app">{{msg}}</div><script>varapp=Vue.createApp({template:"<p>template选项渲染的内容：{{msg}}</p>",data(){return{name:"中国谚语",len:14,msg:"一寸光阴一寸金，寸金难买寸光阴。"}}}).mount("#app")</script>2.2实例及选项方法（methods）选项中定义的是页面或模板中需要调用的一些方法，这些方法会运行一些业务逻辑。在methods的内部，开发者可以使用this直接访问组件选项中data()函数返回的数据对象中的属性，实例代码如下：4.方法<divid="app">{{say()}}，{{msg}}</div><scriptsrc="../js/vue.js"></script><script>Vue.createApp({data(){return{name:'中国谚语',msg:'一寸光阴一寸金，寸金难买寸光阴。'}},methods:{say(){return"你好,"+}}}).mount("#app");</script>2.3数据绑定插值是最简单、最常用的数据绑定方法，通过使用{{}}来绑定数据。{{}}是Mustache的语法，实例代码如下：1.插值<divid="app">{{content}}</div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{content:'Vue学习教程'}},}).mount("#app")</script>2.3数据绑定{{}}之中除了存放最基本的数据，还可以存放JavaScript表达式，实例代码如下：2.表达式绑定<divid="app">{{number/100}}{{completed?'完成':'未完成'}}{{text.split('.').reverse().join(".")}}</div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{number:200,completed:false,text:'abc.123'}}}).mount("#app")</script>2.3数据绑定简单来说，双向数据绑定就是当数据发生变化时，相应的视图会进行更新。当视图更新时，数据也会随之变化，这样开发者就不必去操作DOM对象了。双向数据绑定在Vue.js中的简便的实现方法就是直接使用v-model指令，实例代码如下：3.双向数据绑定<divid="app"><p>端午节有哪些习俗：</p><inputv-model="message"placeholder="请输入"><p>端午节习俗有:{{message}}</p></div><script>Vue.createApp({data(){return{message:"吃粽子",}}})