在过去的十年里，我们的网页变得更加动态和强大。 多亏了JavaScript，我们将大量传统的服务器端代码放到了浏览器中，从而生成了数千行JavaScript代码。 它们连接各种HTML和CSS文件，但缺乏正式的组织。 这也是为什么越来越多的开发者使用Angular、React或Vue等JavaScript框架的原因。 Vue是一个友好、通用和高性能的JavaScript框架。 它可以帮助你创建一个可维护性和可测试性更强的代码库。 Vue是一个渐进式的JavaScript框架，也就是说，如果你已经有一个现成的服务器端应用，你可以将Vue作为应用的一部分嵌入，带来更丰富的交互体验。 或者你想把更多的业务逻辑放在前台，那么Vue的核心库及其生态系统也可以满足你的各种需求。 和其他前台框架一样，Vue允许将一个网页分成可重用的组件，每个组件都包含自己的HTML、CSS和JavaScript，可以用来渲染网页中相应的地方。 如果我们构建一个大的应用程序，在这一点上，我们可能需要把东西分成它们自己的组件和文件。 Vue甚至有一个命令行工具，可以非常简单地快速初始化一个真正的项目。 我们甚至可以使用Vue的单文件组件，其中包含他们自己的HTML，JavaScript和CSS或SCSS与范围。 1.Vue.js详情Vue.js是一个渐进式的JavaScript框架。 什么是渐进？循序渐进是指我们可以用简单的方式从简单到复杂的使用Vue.js。 Vue.js的优点①体积小，压缩后33K ②更高的运行效率基于虚拟dom，虚拟DOM是一种可以预先通过JavaScript计算并优化最终DOM操作的技术。因为这个DOM操作属于解前操作，没有真正的操作DOM，所以叫虚拟DOM。 ③双向数据绑定让开发人员可以把更多的精力放在业务逻辑上，而不是操纵dom对象。 ④生态丰富，学习成本低。市场上有大量成熟稳定的基于Vue.js的ui框架和常用组件！你可以用它来实现快速发展！对初学者友好，容易上手，学习资料丰富。 总的来说，Vue.js是一个我们应该学习和使用的JavaScript框架。 经过几年的发展，Vue.js已经广泛应用于Web端开发、手机端开发、跨平台应用开发等场景的开发中。 应该说Vue.js是前台工作人员开发的必备技能。 Vue.js在招聘市场需求很大，前景很好。 2.安装和部署Vue.js的方法有很多 第一种是直接使用 第二种方式，可以使用Vue提供的CLI之类的工具，快速搭建复杂的脚手架。 作为初学者，我们强烈建议您不使用命令行创建Vue.js的应用程序。 在官方文档上，Vue.js为我们提供了两个版本:一个是开发版，一个是量产版。 顾名思义，我们建议您在开发时使用开发版，因为它包含完整的警告和调试信息。 在生产环境中，我们建议您使用生产版本来替换开发中使用的开发版本。因为量产版是压缩的，所以比较小，删除了少量的警告信息。 除了下载，Vue.js还为我们提供了一种CDN的方式来引用Vue.js。 3.创建第一个Vue应用Vue.js的核心是一个系统，它允许使用简洁的模板语法来宣布将数据呈现到DOM中。 Vue.js可以分为两个重要的组件，一个是视图，一个是脚本。 在安装中，据说我们引入Vue.js的时候会公布一个全局变量，它的名字叫Vue。 你可以通过new Vue得到一个Vue应用，它会返回一个对象，我们称之为application object或者Vue.js的object 在new Vue中，你应该注意需要将一个对象作为参数传递。这个对象有两个非常重要的属性。 它们是el(它代表element，即元素)，可以通过选择器进行选择。 第二个重要的属性是数据 数据是用来存储数据的，我们需要在数据中为视图中公布的变量注册这些变量，并对变量进行初始化和赋值。 & ltdiv id = " app " & gt{ { message } } & lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: '#app '，data: { message:'你好Vue！'，名称:" Vue " } })；& lt/script & gt；4.数据和方法每个Vue实际上都是通过Vue函数创建一个Vue实例开始的。 通常我们用一个变量来接收Vue函数更新后的一个结果，其实就是Vue的对象。 虽然Vue没有完全效仿MVVM的模式，但它的设计也受到了它的启发。 所以我们在开发中经常用VM(ViewModel的缩写)来表示Vue的一个实例。 //我们的数据对象var data = {a: 1 }//这个对象添加到一个Vue实例var vm = new Vue({ data: data})。创建Vue实例时，它会将数据中的所有属性添加到Vue的响应系统中。 当这些属性的值改变时，视图将产生一个“响应” 如果我们希望某个属性或者某个变量有响应，那么我们需要在new Vue上提前公布这个变量。 还有Object.freeze()之类的方法，会阻止对已有属性的修改，也就是说对应的系统无法再跟踪变化。 当我们再次使用Vue时，大多数情况下，我们使用它的响应。 如果你想让一个对象停止响应，我们可以使用freeze()这样的方法。 除了数据属性，Vue还公开了一些有用的实例属性和方法。 它们以美元字符为前缀，以区别于客户定义的属性。 Watch()是一个非常常见和有用的方法。 watch的直译是观察。它可以观察一个变量的变化，为我们获得变化前后的结果。 语法:Vue对象。$watch('观察变量'，function(newVal，oldVal){…})5。生命周期每个Vue实例在创建时都要经历一系列初始化过程。相反，它需要设置数据监控、编译模板、将实例挂载到DOM并在数据改变时升级DOM，等等。 同时，在这个过程中，会运行少量被称为生命周期钩子的函数，这些函数会让开发者有机会在不同的阶段添加自己的代码。 生命周期钩子需要写在new Vue传递的这个对象中，并作为一个属性声明。如果使用了这个属性，它就是一个函数。 然后在Vue的应用运行的每个阶段，系统都会自动调用这样一个公布的生命周期函数。 还应注意，箭头功能不能用于生命周期功能。 箭头函数没有这个，这个这个词需要在我们的生命周期中频繁应用，所以我们不能在生命周期函数中使用箭头函数。 常用的生命周期:①beforeCreate:实例化后，之前调用数据观察和事件配置。 你可以简单的理解为整个页面在创建之前就被调用了。 ②created:实例创建后调用。在这一步中，实例已经完成了以下配置:数据观察、属性和方法的操作、watch/event事件的回调。 ③beforeMount:在挂载开始之前调用的生命周期函数。 在挂载之前启动，相当于准备挂载的状态。 ④mounted:表示挂载成功，即所有节点被新Vue的节点替换。 成功装载后调用的函数。 ⑤beforeupdate:数据改变前调用的函数。 ⑥更新:表示整个数据都升级了，DOM结构也升级了。这个生命周期函数将被调用。 SetTimeout (function () {…}，3000):此函数将在3秒后执行。 然后将执行先前的 更新前更新等生命周期功能 var vm = new Vue({ el: "#app "，data: { msg: "hi vue" }，before create:function(){ console . log(' before create ')；}，created:function(){ console . log(' created ')；}，before mount:function(){ console . log(' before mount ')；}，已挂载:function(){ console . log(' mounted ')；}，before update:function(){ console . log(' before update ')；}，更新:function(){ console . log(' updated ')；}});setTimeout(function(){ VM . msg = " change "；},3000);其他生命周期功能:①激活:当①激活:保活组件被激活时调用 当你学习组件时，你会用到它们。 ②停用:当保活组件停用时调用。 ③销毁前:页面或整个应用程序销毁前。 ④销毁:页面或整个应用程序被销毁后。 ⑤errorCaptured:新增，在捕获该组件的错误时，调用它来捕获该组件的错误。 6.模板语法Vue.js使用基于HTML语法的语法，允许开发者以公告的方式将DOM绑定到底层Vue实例的数据。 Vue.js的所有模板都是合法的HTML，所以可以被遵循规范的浏览器和HTML解析器解析。 在底层实现中，Vue将模板编译成虚拟DOM渲染函数。 结合响应系统，Vue可以智能计算需要重新渲染多少组件，最大限度减少DOM操作次数。 也就是说Vue从2个正的层面提升了整个JS的运行效率。 1)插值数据绑定的最常见形式是使用“Mustache”语法来包含文本插值的变量值。 也就是在页面上把一个变量用双括号的形式包装起来，在数据中公布属性及其值，就可以完成这样一个文本插值的动作。 通过使用Vue的v-once指令，还可以执行一次插补。当数据发生变化时，插值处的内容不会更新。 & ltdiv id = " app " v-once & gt；{ { msg } } & lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data: { msg: "hi vue "，} })；& lt/script & gt；大括号将数据解释为纯文本，而不是HTML代码。 要输出真正的HTML，需要使用v-html命令。 & ltdiv id = " app " & gt& ltp v-html = " raw html " & gt；& lt/p & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data:{ raw html:' & lt；span style="color:red " >这应该是红色的。& lt/span & gt；'}});& lt/script & gt；如何使用Vue.js为HTML标签绑定属性？Vue.js给我们提供了一个类似bind的语法，绑定HTML标签的几个属性，让它们动态的变化一点点。 语法:v-bind:attribute = " value " < div id = " app " >& ltdiv v-bind:class="color " >& lt/p & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data:{ color:' red ' } })；& lt/script & gt；& ltstyle type="text/css " >。红色{颜色:红色；字体大小:100像素；} & lt/style & gt；JavaScript表达式的使用Vue.js完全支持JavaScript表达式。 示例:{{ number+1 }}//简单操作{{ ok？YES': 'NO' }}//三元运算符{{message.split(' ')。反转()。join(“”)} }//复杂函数运算2)指令指令是一个带有v前缀的特殊特性。 指令的值应该是单个表达式。 指令的职责是当表达式的值改变时，它的相关影响将相应地作用于DOM。 & ltdiv id = " app " & gt& ltp v-if="seen " >查看是否

Vue.js & lt/a & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，数据:{ URL:" https://cn . Vue js . org/"；}});& lt/script & gt；修饰符是特殊的后缀，由。用于指示指令应该以特殊方式绑定。 我们还没有学习click事件。我们可以使用@click命令为元素绑定相应的click事件。 在初始化Vue对象时，我们使用一个属性，比如methods。 在这个属性中，相应的方法和方法的函数体由键值对来声明。 父元素和子元素都有click事件。如果您单击一个子元素，并且不想触发父元素的click事件，只需添加。停下来。 & ltdiv id = " app " & gt& ltdiv @ click = " click1 " & gt& ltdiv @ click.stop = " click2 " & gt点击我& lt/div & gt；& lt/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，数据:{ }，方法:{ click 1:function(){ console . log(' click 1 ')；}，click 2:function(){ console . log(' click 2 ')；}, }});& lt/script & gt；7 .类和样式绑定绑定HTML类我们可以将一个对象传递给v-bind:class来动态切换类 您可以在对象中输入更多字段来动态切换多个类。 此外，v-bind:class指令可以与公共类特性共存。 & ltdiv id = " app " & gt& ltdiv class = " test " v-bind:class = " { active:is active，green:is green } " style = " width:200 px；高度:200px文本对齐:居中；行高:200像素；"& gt嗨vue & lt/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，数据:{ is active:true；is green:true；}});& lt/script & gt；& ltstyle & gt。测试{ font-size:30px；} .绿色{ color:# 00ff 00；} .活动{背景:# FF0000} & lt/style & gt；v-bind:class语法还支持数组形式，可以通过三元运算将特定值赋给某种样式。 我们使用三元运算进行具体判断，如果不为真则绑定空样式。 & ltdiv id = " app " & gt& ltdiv class = " test " v-bind:class = "[is active？活动“:”，是绿色吗？green ':' ']" style = " width:200 px；高度:200px文本对齐:居中；行高:200像素；"& gt嗨vue & lt/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，数据:{ is active:true；is green:true；}});& lt/script & gt；& ltstyle & gt。测试{ font-size:30px；} .绿色{ color:# 00ff 00；} .活动{背景:# FF0000} & lt/style & gt；通过v-bind:style语法，绑定内联样式可以是HTML标签的动态绑定样式。 当v-bind:style指令用于绑定元素的样式时，我们也可以使用三元运算来动态绑定样式。 & ltdiv id = " app " & gt& ltdiv :style="{color: color，fontSize: size，background: isRed？# ff 0000 ':' ' } " & gt；嗨vue & lt/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data: { color: "#000000 "，size:'50px '，is red:true } })；& lt/script & gt；8.条件呈现指令用于有条件地呈现一段内容。 只有当表达式返回true时，才会呈现这段内容。 在2.1.0版本之后，Vue.js增加了一个新的v-else-if，和你过去学过的JavaScript语法一致。 & ltdiv id = " app " & gt& ltdiv v-if = " type = = = ' A ' " & gt；A & lt/div & gt；& ltdiv v-else-if = " type = = = ' B ' " & gt；B& lt；/div & gt；& ltdiv v-else-if = " type = = = ' C ' " & gt；C & lt/div & gt；& ltdiv v-else & gt；不是A/B/C & lt；/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data:{ type:" B " } })；& lt/script & gt；Vue.js还提供了v-show指令，用于根据条件显示一个元素。v-show的元素会一直呈现并保存在DOM中。 V-show只是切换元素的CSS属性的显示。 & ltdiv id = " app " & gt& lth1 v-show = " ok " & gt；你好！& lt/h1 & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data:{ ok:false } })；& lt/script & gt；v-show和v-if的区别在于，v-if是一种“真正的”条件渲染。 V-if也是惰性的。如果不满足它的条件，它将不会被渲染。 相比之下，v秀就简单多了。不管条件如何，它首先呈现页面上的元素，然后通过CSS在隐藏和显示之间切换。 一般来说，v-if的切换开销较高，而v-show的初始化开销较高。 所以，如果需要非常频繁的切换，还是用v秀比较好；如果工作条件很少变化，最好使用v-if。 9.列表渲染首先看数组形式的列表渲染。我们可以使用v-for指令来呈现基于数组的列表。 v-for指令需要items中item形式的特殊语法，其中items表示源数据数组，item是迭代数组元素的别名。 在列表渲染的过程中，我们需要注意的是，Vue在升级用v-for渲染的元素列表时，默认使用的是“就地升级”策略。 如果数据项的顺序改变，Vue不会移动从不匹配数据的DOM元素的顺序。这种模式本身是高效的，但是只适合独立的子组件状态或者临时的DOM状态。 为了提醒Vue它可以跟踪每个节点的身份并重用和重新排序现有的元素，您需要为每个项目提供一个唯一的key属性。 & ltdiv id = " app " & gt& ltul & gt& lt李v-for="item，index in items ":key = " index " & gt；{ { index } } { { item.message } } & lt/李& gt& lt/ul & gt；& ltul & gt& ltli v-for="value，key in object ":key = " key " & gt；{ { key } }:{ { value } } & lt；/李& gt& lt/ul & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，数据:{ items: [ { message: 'Foo' }，{ message: 'Bar' } ]，对象:{ title:'如何在Vue中做列表'，作者:' Jane Doe '，pulishedAt:' 2016-04-10 ' } })；& lt/script & gt；10.事件绑定可以使用v-on指令监听DOM事件，并在被触发时运行少量JavaScript代码。 但是很多事件解析逻辑会比较复杂，所以直接用v-on指令写JavaScript代码不可行。 因此，v-on也可以接收需要调用的方法名。 & ltdiv id = " app " & gt& ltdiv id = " example " & gt& lt按钮v-on:click = " counter+= 1 " & gt；值:{ { counter } } ；& lt按钮v-on:click="greet('abc '，$ event)" & gt；Greet & lt/button & gt；& lt/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，数据:{ counter:0；}，方法:{ greet: function(str，e){ alert(str)；console . log(e)；} }});& lt/script & gt；v-on指令可以绑定HTML元素拥有的所有事件。 常见的Vue.js事件修饰符:。停下来。防止，。捕捉，。自我，。曾经，。被动的。表单输入绑定我们可以在表单< input >中使用v-model指令；、& lttextarea & gt和<选择>上创建双向数据绑定 它会根据控件类型自动选择正确的方法来升级元素。 V-model内部对不同的input元素使用不同的属性，抛出不同的事件:text和textarea元素使用value属性和input事件。 复选框和单选按钮使用checked属性和change事件。 选择字段将值和改变事件。 使用双向绑定后，如何操作表单元素的默认值，通过改变数据对象的属性来设置表单元素的默认值？ 表单提交的完成:当表单元素的值发生变化时，我们可以在数据对象的相应属性中收集这些表单元素的相应值，我们可以在页面上创建一个提交按钮，将click事件绑定到它上面。 在为它绑定了click事件之后，我们就可以通过这个对象获取每个表单元素的值了。 我们可以以一个对象的形式发布一个变量，来收集这个形式的所有元素的值。 有了这样一个变量，我们可以用它来提交表单。 & ltdiv id = " app " & gt& ltdiv id = " example " & gt& ltinput v-model = " message " placeholder = " edit me " >& ltp & gt消息是:{ { message } } & lt/p & gt；& lttextarea v-model = " message 2 " placeholder = "添加多行" & gt& lt/textarea & gt；& ltp style= "空白:前置行；"& gt{ { message2 } } & lt/p & gt；& ltbr/>；& ltdiv style="margin-top: 20px " >& ltinput type = " checkbox " id = " Jack " value = " Jack " v-model = " checked names " >& lt="jack " >的标签。杰克& lt/label & gt；& ltinput type = " checkbox " id = " John " value = " John " v-model = " checked names " >& lt="john " >的标签。约翰& lt/label & gt；& ltinput type = " checkbox " id = " Mike " value = " Mike " v-model = " checked names " >& lt="Mike " >的标签。杰克& lt/label & gt；& ltbr & gt& ltspan & gt已检查的姓名:{ { checkedNames } } & lt/span>。& lt/div & gt；& ltdiv style="margin-top: 20px " >& ltinput type = " radio " id = " One " value = " One " v-model = " picked " >& lt="one " >的标签。One & lt/label & gt；& ltinput type = " radio " id = " Two " value = " Two " v-model = " picked " >& lt="two " >的标签。两个& lt/label & gt；& ltbr & gt& ltspan & gtpicked:{ { picked } } & lt；/span>。& lt/div & gt；& lt/div & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data: { message: "test "，message2: "hi "，checkedNames: ['Jack '，' John']，picked: "Two" }，methods:{ submit:function(){ var post obj = { msg 1:this . message，msg2: this.message2，checkval:this . checked names }；console . log(post obj)；} }});& lt/script & gt；12.组件基础组件是一个可重用的Vue实例。在开发过程中，我们将频繁重复的功能封装成组件，以达到快速方便开发的目的。 Vue.js使用Vue.compoment函数创建一个组件。 component函数的第一个参数是组件的名称，第二个参数将组件描述为一个对象。 因为组件是可重用的Vue实例，所以它们接收与新Vue相同的选项 你可以使用HTML标签来调用一个组件，标签的名字就是组件的名字。 组件也可以重用，每个组件的数据都封装在组件中，互不影响。 您还可以通过props为组件定义属性，我们可以在模板中应用和呈现这些属性。 在调用组件中，我们可以通过组件的属性给这个属性赋值。 要创建一个属性，我们需要注意组件的模板需要一个根节点。 组件的事件监控:可以通过该对象的emit方法触发事件，第一个参数是事件名称，第二个参数是少量的可移植参数。 组件的父级可以通过事件绑定接收由emit函数触发的事件。 在模板中，我们可以通过slot tag来宣告一个组件的slot，通过slot tag可以插入任意的HTML内容和标签，在组件内部，我们可以插入少量的标签和自己设置的内容。 & ltdiv id = " app " & gt& ltbutton-counter title = " title 1:" @ clicknow = " clicknow " & gt；& lth2 & gt嗨& lt/H2 & gt；& lt/button-counter & gt；& lt按钮计数器title = " title 2:" & gt；& lt/button-counter & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；Vue.component('button-counter '，{ props: ['title']，data:function(){ return { count:0 } }，template:“& lt；div & gt& lth1 & gt嗨& lt/hi & gt；& lt按钮v-on:click = " click fun " & gt；{{ title }}您点击了我{{ count }}次。& lt/button & gt；& ltslot & gt& lt/slot & gt；& lt/div & gt；'，方法:{ click fun:function(){ this . count++；这个。$emit('clicknow '，this . count)；} }})var app = new Vue({ el: "#app "，data: { }，methods:{ click now:function(e){ console . log(e)；} }});& lt/script & gt；13.组件注册我们已经知道可以通过Vue.compoment函数在页面上公告并创建一个Vue.js的组件。 Vue.compoment函数的第一个参数叫做组件名，可以用两种方式定义。第一种可以用短横线划分命名，第二种可以用驼峰法命名。 我们的Vue.compoment函数创建的组件都是全局注册的，也就是说，注册后可以在任何新创建的Vue根实例模板中应用。 Vue.js还提供了本地注册机制，因为全局注册往往并不理想。 全球注册往往不理想。 例如，如果您使用webpack这样的构建系统，全局注册所有组件意味着即使您不再使用某个组件，它仍然会包含在您的最终构建结果中。 这导致了客户下载的JavaScript资源的不必要的增加。 这个问题可以通过本地注册来解决。 如果要实现本地注册，我们需要在初始化Vue函数的时候，也就是创建Vue对象的时候，在Vue函数的一个参数中宣告一个compoments属性，这个属性是以对象的形式存在的。 在声明了诸如components之类的属性之后，我们可以在其中本地注册组件。 & ltdiv id = " app " & gt& lt测试& gt& lt/test & gt；& lt/div & gt；& ltscript type = " text/JavaScript " & gt；var app = new Vue({ el: "#app "，data: { }，components:{ test:{ template:" & lt；h2 & gth2 & lt/H2 >；} }});& lt/script & gt；Vue.js还支持组件在模块系统中的部分注册。例如，使用像webpack这样的模块系统，我们可以通过使用导入组件的名称和from组件的位置来导入组件。 然后，组件的本地注册通过Vue对象中的组件等属性进行。 14.单文件注册在很多Vue项目中，我们使用Vue.component函数来定义全局组件，这在很多中小型项目中是行得通的，没有问题。但是在稍微复杂一点的项目中，会有以下明显的缺点:全局定义要求每个组件中的名字一定不能重复。 字符串模板缺乏语法突出显示支持。 不支持CSS 没有构建步骤。 单文件组件提供了上述所有问题的解决方案，还提供了webpack或Browserify等构建工具。 为了使用Vue.js的单文件组件，我们需要安装以下环境:①安装npmnpm，叫做Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区中支持第三方模块最多的包管理器。 Npm -v②因为网络的原因，安装cnpmnpm Install-g cnpm-registry = https://registry.npm.taobao.org③Install vue-clicnpm Install-g @ vue/④CLI④安装web pack cnpm Install-g web pack web pack是JavaScript Bundler创建的项目的目录结构:①public:打包后，用于部署到生产环境下的一个目录。 ②src:开发目录 ③scr下的部件:整个项目的部件目录。 ④app.vue:作为整个项目的入门文件，完成了组件的引入。 (可以通过import的方式导入，通过components在页面本地注册使用)创建的项目的目录结构由单个文件组件组成:①template: template，try区域②script: script区域③style: style区域完整刻画了HTML开发必备的三点:DOM结构、JavaScript脚本和CSS样式。 示例:您自己设置的vue组件< template >& lth2 & gt测试{ { msg } } & lt/H2 & gt；& lt/template & gt；& lt脚本& gtexport default { name: 'HelloWorld '，props: { msg: { type: String，default: "test msg" } }，methods: { }，data() { return { key:value } }，} & lt/script & gt；& ltstyle & gt。红色{ color:# ff 0000；} & lt/style & gt；15.免终端开发Vue应用cli方法cli是命令行，黑色的终端形式，在这里可以键入命令行。 这就需要开发者对终端、节点、npm等有很多了解。，否则会在以下几个方面遇到很多困难:①构建项目环境 ②运行和发布项目 ③配置less/sass/typescript/babel等预编译器。 ④安装各种流行的组件库。 Uni-app+HBuilder xuni-app和HBuilder都是DCloud公司出品。前者是框架，后者是ide。它们相互匹配，使得基于Vue.js开发项目变得更加简单高效！让开发者更专注于业务逻辑。