Vue体验(一)

记录:260

体验指令:

v-text,v-html,v-show,v-cloak,v-once,v-pre,v-model,v-on,v-bind,v-if,v-else,v-else-if,v-for

本例环境:jQuery:3.6.0; Vue:2.6.0

一、名词

HTML:超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言。

CSS:层叠样式表(Cascading Style Sheets)是一种用于表现HTML等文件样式的语言。

JavaScript:是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;是一种基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

jQuery:一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

Vue:一套用于构建用户界面的渐进式框架。

二、Vue体验

本例以vue_demo项目为例,记录体验步骤。

1.初始化vue_demo

1.1.新建vue_demo

在vue_demo中新建如下目录:

vue_demo\css:存放css样式文件;

vue_demo\images:存放图片文件;

vue_demo\js:存放js包,主要包括vue.js、jquery.js等;

vue_demo\src:存放体验文件,主要是html文件和js文件。

1.2.HTML基础结构及Vue使用基础结构

1.2.1如下是本例体验html结构和Vue体验基础结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue体验</title>
</head>
<body>
    <div id="app">
        <div>{{info}}</div>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                info: '开始体验Vue,使用插值表达式{{}}'
            }
        });
    </script>
</body>
</html>

1.2.2功能:在id="app"的div标签中使用插值表达式显示信息Vue对象传递的数据。

1.2.3Vue创建

创建Vue对象是使用new关键字,如上语法是Vue构造函数,在源码中有如下标识:'Vue is a constructor and should be called with the `new` keyword'。

在Vue.js源码中是如下:

function Vue (options) {
if (!(this instanceof Vue)
) {
  warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}

1.2.4Vue入参选项

Vue的入参是一个对象,本质是一个JSON格式本例中传入对象是:

{el: '#app',
  data: {
      info: '开始体验Vue,使用插值表达式{{}}'
  }}

其中:el代表这个Vue对象需要绑定的元素,data表示这个Vue对象与绑定元素交互数据,el和data是固定写法。

入参中options选项:el,template:data,props,computed,methods,watch,directives,filters,components等。

细节查找官网:https://cn.vuejs.org/的菜单路径:学习->API

1.2.5在浏览器中打开index01.html

Vue实例的data中的info属性的字符串显示在标签<div>{{info}}</div>中的插值表达式中。

2.体验v-text,v-html,v-show,v-cloak,v-once,v-pre,v-model指令

2.1HTML标签

<div id="app">
  <div><strong>开始体验Vue</strong></div>
  <div>{{info}}</div>
  <div><span>体验指令: v-pre ,显示原始Mustache标签 </span><span v-pre>{{info}}</span></div>
  <div v-text="infoVtext"></div>
  <div v-html="infoVhtml"></div>
  <div v-show="infoVshow">体验指令: v-show ,true显示,false不显示</div>
  <div v-cloak>{{infoVcloak}}</div>
  <div v-once>{{infoVonce}}</div>
  <div>
      <div><span>体验指令: v-model ,双向数据绑定</span></div>
      <div><span>输入: </span><input type="text" v-model="infoVmodel" style="width: 300px;"></div>
      <div><span>变化: </span><span>{{infoVmodel}}</span></div>
  </div>
</div>

2.2对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
   info: '体验插值表达式{{}} ,显示计算后内容',
   infoVtext: '体验指令: v-text ,填充纯文本',
   infoVhtml: '<span>体验指令: v-html ,填充HTML片段</span>',
   infoVshow: true,
   infoVcloak: '体验指令: v-cloak ,不会显示,直到编译结束',
   infoVonce: '体验指令: v-once ,只渲染元素和组件一次',
   infoVmodel: '请输入体验双向绑定'
 }
});

2.3效果

运行效果如下:

3.体验v-on

3.1HTML标签

<div id="app">
  <div><strong>开始体验Vue的v-on简写@</strong></div>
  <div>体验指令: v-on:click</div>
  <div><button v-on:click="handleAddNum">点击</button><span v-text="addNum"></span></div>
  <div>体验指令: @click</div>
  <div><button @click="handleAddNum2">点击</button><span v-text="addNum2"></span></div>
  <div>体验在函数中传入event</div>
  <div><button @click="handleEvent($event)">点击</button><span v-text="getEvent"></span></div>
  <div>体验在函数传入多个参数</div>
  <div><button @click="handleMore('浙江','中国')">点击</button><span v-text="result"></span></div>
  <div>体验函数有返回值</div>
  <div><span>函数返回值: </span><span v-text="handleReturn()"></span></div>
  <div>体验事件冒泡</div>
  <div @click="handleBubbleMain">
    <div v-text="mainNum"></div>
    <button @click='handleBubbleSub'>点击</button>
  </div>
  <div>体验阻止事件冒泡@click.stop</div>
  <div @click="handleStopBubbleMain">
    <div v-text="stopMainNum"></div>
    <button @click.stop='handleStopBubbleSub'>点击</button>
  </div>
</div>

3.2对应Vue代码

var vm = new Vue({
  el: '#app',
  data: {
    addNum: 0,
    addNum2: 0,
    getEvent:'',
    result:'',
    mainNum:0,
    stopMainNum:0
  },
  methods: {
   handleAddNum: function () {
       this.addNum++;
   },
   handleAddNum2: function () {
       this.addNum2++;
   },
   handleEvent: function (event) {
       //event.target返回事件元素对象
       this.getEvent=event.target.tagName;
   },
   handleMore:function(city,country){
       this.result = city + '在' +country;
   },
   handleReturn: function(){
       return '杭州在浙江';
   },
   handleBubbleMain:function(){
       this.mainNum++;
   },
   handleBubbleSub:function(){ },
   handleStopBubbleMain:function(){
       this.stopMainNum++;
   },
   handleStopBubbleSub:function(){}
  }
});

3.3效果

运行效果如下:

4.体验v-bind

4.1样式标签

<style>
  .rectangle {
    width: 200px;
    height: 30px;
  }
  .colorInfo {
    border: 2px solid blue;
    background-color: green;
  }
</style>

4.2HTML标签

<div id="app">
  <div><strong>开始体验Vue的v-bind简写:</strong></div>
  <div>体验指令: v-bind:href</div>
  <a v-bind:href="infoUrl01">vuejs官网</a>
  <div>体验指令: v-bind:href简写 :href</div>
  <a :href="infoUrl02">API文档</a>
  <div>体验指令: v-bind绑定class绑定对象</div>
  <div :class="{rectangle:isRectangle,colorInfo:isColorInfo}"></div>
  <div>体验指令: v-bind绑定class绑定数组-方式一</div>
  <div :class="[arrayRectangle,arrayColorInfo]"></div>
  <div>体验指令: v-bind绑定class绑定数组-方式二</div>
  <div :class="arrayClass"></div>
  <div>体验指令: v-bind绑定class绑定对象</div>
  <div :class="objClass"></div>
  <div>体验指令: v-bind绑定style</div>
  <div :style="{width: styleWidth, height:styleHeight,
backgroundColor:styleBackGround}"></div>
  <div>体验指令: v-bind绑定style绑定对象</div>
  <div :style="objStyle"></div>
  <div>体验指令: v-bind绑定style绑定数组</div>
  <div :style="[objStyle,forBoder]"></div>
</div>

4.3对应Vue代码

var vm = new Vue({
el: '#app',
data: {
 infoUrl01: 'https://cn.vuejs.org/',
 infoUrl02: 'https://developer.mozilla.org/zh-CN/',
 isRectangle: true,
 isColorInfo: true,
 arrayRectangle:'rectangle',
 arrayColorInfo:'colorInfo',
 arrayClass:['rectangle','colorInfo'],
 objClass:{
     rectangle:true,
     colorInfo:true
 },
 styleWidth: '200px',
 styleHeight: '30px',
 styleBackGround:'red',
 objStyle:{
     width: '200px',
     height: '30px',
     backgroundColor: 'red'
 },
 forBoder:{
     border: '2px solid blue'
 }
}
});

4.4效果

运行效果如下:

 

5.体验v-if,v-else,v-else-if,v-for

5.1HTML标签

<div id="app">
  <div><strong>开始体验Vue的分支和循环</strong></div>
  <div style="color: red;">体验指令: v-if,v-else,v-else-if</div>
  <div>
   <div><span>输入: </span><input type="text" v-model="info"></div>
   <div><span>结果: </span>
     <span v-if="info>100000">高薪</span>
     <span v-else-if='info<=99999&&info>=10000'>中等</span>
     <span v-else-if='info<10000&&info>=5000'>正常</span>
     <span v-else>努力中</span>
   </div>
  </div>
  <div style="color: red;">体验指令: v-for,遍历数组</div>
  <div v-for='item in citys'>{{item}}</div>
  <div style="color: red;">体验指令: v-for,遍历数组包含对象</div>
  <div :key='item.id' v-for='item in ProvincialCapital'>
     省名称: {{item.province}}, 市名称: {{item.capital}}
  </div>
  <div style="color: red;">体验指令: v-for,遍历对象</div>
  <div v-for='(value,key,index) in girlInfo'>
     key(字段名称): {{key}}, 
	 value(字段值): {{value}}, 
	 index(字段索引): {{index}}
  </div>
</div>

5.2对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
     info: 0,
     citys: ['杭州', '宁波', '绍兴'],
     ProvincialCapital: [
         {id: 1,province: '浙江',capital: '杭州'},
         {id: 2,province: '福建',capital: '福州'}],
     girlInfo:{ cup:'C',name:'小北',height: 160 }}
});

5.3效果

运行效果如下:

 

以上,感谢。

2021年9月11日

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值