区块链技术博客
www.b2bchain.cn

Vue学习笔记(一):十分钟带你入门Vue

这篇文章主要介绍了Vue学习笔记(一):十分钟带你入门Vue的讲解,通过具体代码实例进行20385 讲解,并且分析了Vue学习笔记(一):十分钟带你入门Vue的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=20385

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

前言:什么是Vue呢?百度百科给出的解释是这样的:

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。


文章目录

    • 一。Vue的下载以及简单使用
      • 1.vue的下载
      • 2.第一个vue实例
      • 3.简单说明
    • 二。Vue常用标签:
      • 1.v-text
      • 2.v-html
      • 3.v-on
      • 4.v-show
      • 5.v-if
      • 6.v-bind
      • 7.v-for
      • 8.v-model

一。Vue的下载以及简单使用

1.vue的下载

进入vue官方网站,选择开发版本,点击下载:
Vue学习笔记(一):十分钟带你入门Vue
Vue学习笔记(一):十分钟带你入门Vue

2.第一个vue实例

  1. 导入开发版本的Vue.js。
  2. 创建Vue实例对象,设置el属性和data属性。
  3. 使用简洁的模板语法把数据渲染到页面上。
    Vue学习笔记(一):十分钟带你入门Vue

3.简单说明

el挂载点:

  1. el是用来设置Vue实例挂载(管理)的元素。
  2. Vue会管理el选项命中的元素及其内部的后代元素。
  3. 可以使用其他的选择器,但是建议使用ID选择器。
  4. 可以使用其他的双标签,不能使用HTML和BODY。

data数据对象:

  1. Vue中用到的数据定义在data中。
  2. data中可以写复杂类型的数据。
  3. 渲染复杂类型数据时,遵守js的语法即可。

二。Vue常用标签:

1.v-text

v-text:设置标签的文本值(textContent)。

示例代码如下:

<div id="app">    <h2 v-text="news+'!'"></h2>    <h2>{{news+"!"}}</h2> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({         el: '#app',         data: { 			news:"你好"         } 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-text指令的作用是:设置标签的内容(textContent)。
  2. 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。
  3. 内部支持写表达式。

2.v-html

v-html:设置标签的innerHTML

示例代码如下:

<div id="app">    <p v-html="news"></p> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({         el: '#app',         data: { 			//news:"你好" 			news:"<h1>你好</h1>"         } 	}) </script> 

效果图如下:Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-html指令的作用是:设置元素的innerHTML
  2. 内容中有html结构会被解析为标签
  3. v-text指令无论内容是什么,只会解析为文本
  4. 解析文本使用v-text,需要解析html结构使用v-html

3.v-on

v-on:为元素绑定事件

示例代码如下:

<div id="app">    <input type="button" value="事件绑定" v-on:click="go()"> 		    <input type="button" value="事件绑定1" @:click="go()"> <script type="text/javascript">     /*vue定义*/     var vue = new Vue({         el: '#app',         data: { 			news:"你好!"         }, 		methods:{ 			go(){ 				alert(this.news); 			} 		} 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-on指令的作用是:为元素绑定事件
  2. 指令可以简写为@
  3. 绑定的方法定义在methods属性中
  4. 方法内部通过this关键字可以访问定义在data中数据

4.v-show

v-show:根据表达值的真假,切换元素的显示和隐藏

示例代码如下:

<div id="app">    <a v-show="show">你看得见我</a>    <a v-show="hide">你看不见我</a>    <a v-show="sex=woman">你看不见我</a> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({         el: '#app',         data: { 			show:true, 			hide:false, 			sex:"man"         } 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-show指令的作用是:根据真假切换元素的显示状态
  2. 原理是修改元素的display,实现显示隐藏
  3. 指令后面的内容,最终都会解析为布尔值
  4. 值为true元素显示,值为false元素隐藏
  5. 数据改变之后,对应元素的显示状态会同步更新

5.v-if

v-if:根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

示例代码如下:

<div id="app">    <a v-if="show">你看得见我</a>    <a v-if="hide">你看不见我</a>    <a v-if="sex=woman">你看不见我</a> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({         el: '#app',         data: { 			show:true, 			hide:false, 			sex:"man"         } 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-if指令的作用是:根据表达式的真假切换元素的显示状态。
  2. 本质是通过操纵dom元素来切换显示状态。
  3. 表达式的值为true,元素存在于dom树中,为false,从dom树中移除。
  4. 频繁的切换v-show,反之使用v-if,前者的切换消耗小。

6.v-bind

v-bind:设置元素的属性(比如:src,title,class)

示例代码如下:

<div id="app"> 	<img v-bind:src="imageUrl" v-bind:title="imageTitle"/> 	 	<img :src="imageUrl" :title="imageTitle"/> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({ 		el:"#app", 		data:{ 			imageUrl:"image/messi.jpg", 			imageTitle:"梅西" 		} 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue

总结:

  1. v-bind指令的作用是:为元素绑定属性。
  2. 完整写法是 v-bind:属性名。
  3. 简写的话可以直接省略v-bind,只保留 :属性名。
  4. 需要动态的增删class建议使用对象的方式。

7.v-for

v-for:根据数据生成列表结构

示例代码如下:

<div id="app"> 	<ul> 	    <li v-for="(item,index) in num" :title="item"> 	      {{index}}:{{item}} 	    </li> 	 	    <li v-for="(student,index) in student"> 	      {{student.name}} 	    </li> 	</ul> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({ 		el:"#app", 		data:{ 			num:[1,2,3,4,5], 			student:[ 				{name:"张三"}, 				{name:"李四"} 			] 		} 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-for指令的作用是:根据数据生成列表结构。
  2. 数组经常和v-for结合使用。
  3. 语法是( item,index ) in 数据。
  4. item 和 index 可以结合其他指令一起使用。
  5. 数组长度的更新会同步到页面上,是响应式的。

8.v-model

v-model:获取和设置表单元素的值(双向数据绑定)

示例代码如下:

<div id="app"> 	<input type="text" v-model="news" /> </div> 		 <script type="text/javascript">     /*vue定义*/     var vue = new Vue({ 		el:"#app", 		data:{ 			news:"你好!" 		} 	}) </script> 

效果图如下:
Vue学习笔记(一):十分钟带你入门Vue
总结:

  1. v-model指令的作用是便捷的设置和获取表单元素的值。
  2. 绑定的数据会和表单元素值相关联。
  3. 绑定的数据←→表单元素的值。
    (注意:v-model是与表单元素相结合对应,换成其他元素会失效)

本文转自互联网,侵权联系删除Vue学习笔记(一):十分钟带你入门Vue

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Vue学习笔记(一):十分钟带你入门Vue
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们