Vue基础语法、事件监听、指令笔记以及Demo

最新推荐文章于 2022-12-16 17:44:43 发布

丸子'

最新推荐文章于 2022-12-16 17:44:43 发布

阅读量283

点赞数

分类专栏：教学笔记

本文链接：https://blog.csdn.net/qq_41193701/article/details/94662836

版权

教学同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

笔记

3 篇文章 0 订阅

订阅专栏

1：Vue基本语法
如果我们很清楚js的语法这对于我们在学习Vue的帮助就很大
Vue.js一套构建用户界面的渐进式框架。与js不同的是Vue可以由下往上执行
其实我们可以把它理解为一个在JavaScript的基础上的一个脚本语言就如“jq”一样。因此Vue也提供了js的算法

例如{{5+5}}页面的显示效果为 10；

与jq类似在使用时我们需要导入“vue.js”包这是我们可以在vue.js的官网上下载后存放到本地
导包“<script type="text/javascript" src="vue.min.js"></script>”
//实例语法

new Vue({
	el:'#vue',
	data:{
		show:'Holle, this is VueDome'
		}
	})；

el：此处标识脚本语言针对于何处类似于jq中的$("")引用原则也基于js #代表id、.代表类
data:为数据
每个代码块用“，”隔开末尾不用
show：为引用标识在html代码块中使用{{}}，如果你了解jsp母版技术中的jstl语法${}，很好此处的“show”类似于 jstl中的var="show"
不同的是在引用时Vue中使用{{show}} 而jstl 使用${show} 注意区分
其实也可以把看着是从“data（当着服务器）”传来的一个值吧哈哈
//html代码

  <div id="vue">
    <p>{{show}}</p>
  </div>

================================================
2:当然data是可以定义属性
//申明属性

var VueData={one:"第一个值",two:"第二个值"}

var vu=new Vue({
	el:'#VData',
	data:VueData
	})

特别注意啊 Vue中的“V”一定要大写哈哈
//html代码

  <div id="VData">
      这里是data的三个属性---<span>属性1:{{one}}</span>、<span>属性2：{{two}}</span>
  </div>

console.log("测试VueData的部分值"+vu.$data.one)

输出==="测试VueData的部分值第一个值"

语法“申明的变量名.$标识引用.具体值(vu.$data.one)”
3：指令；

v-html 可以理解为赋值吧
  <div class="v-html">
     <p v-html="neirong"></p>
  </div>
vue：
new Vue({
	el:'.v-html',
	data:({
		 neirong:"这是v-html指令"
		})
	})

v-model、v-bind

我这里发现 似乎v-bind要作用于input标签中？ 因为我使用div和其他标签 测试无效（开始我把v-bind理解为js点击事件其实并不）
v-bind：class="{'css样式'：标识引用}" 当标识引用默认为true时 标识样式引用
   <h1>v-bind指令</h1>
  <div class="div" v-bind:class="{'aa': use}">
     <div>
       <p>修改div颜色<input type="checkbox" v-model="use"></p>
     </div>
  </div>
vue：
new Vue({
	el:'.div',
	data:{
		use: false
		}
	});

v-if 指令将根据表达式 标识指令 的值(true 或 false )来决定是否插入相关元素

<div class="v-if">
    <p v-if="show">通过相关标识指令的值来判断是否插入值：</p>
        <template v-if="yes">
          <p>这是当标识指令值为true时插入的值</p>
        </template>
</div>
vue：
new Vue({
	el:'.v-if',
	data:{
		show:true,
		yes:true
		}
	});

v-model 我们可以使用这个指令来进行数据的双向绑定
v-for 循环语法(v-for="循环指令 in 标识指令")
循环指令可以是任意一个名而标识指令 来于data数组中的申明指令

Vue：
var shops=new Vue({
	el:'.shop',
	data:{
		shopInfo:[{	
			shop_name:'vivo手机',
			shop_prise:5555,
			shop_size:0}]
		}
})
html:
        <tr v-for="shopInfo in shopInfo">
          <td>{{shopInfo.shop_name}}</td>
          <td>{{shopInfo.shop_prise}}</td>
          <td>{{shopInfo.shop_size}}</td>
        </tr>

==============================================
事件绑定(1)使用js内联的方式绑定一个事件

v-on：事件名('hi');
Vue:
new Vue({
  el:'指令',
  methods:{
  事件名:function(mes){
	alert(mes)
   }
 }
})
(2)原生的绑定
v-on：事件名();
Vue:
new Vue({
  el:'指令',
  methods:{
  事件名:function(){
	alert("这是一个事件")
   }
 }
})

----------------------------------------------------------------基础语法实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
  .aa{
	  background-color:#666;
	  width:200px;
	  height:200px;
	  }
  .div{
	  width:200px;
	  height:200px;
	  border: solid 1px #000000;
	  }
  .div p{
	  margin:40px auto;
	  width:100px;
	  margin-left:25%;
	  }
</style>
</head>

<body>
  <div id="vue">
    <p>{{show}}</p>
  </div>
  <p>定义data属性</p>
  <div id="VData">
      这里是data的两个属性值---<span>属性1:{{one}}</span>、<span>属性2：{{two}}</span>
  </div>
  <h1>v-html指令</h1>
  <div class="v-html">
     <p v-html="neirong"></p>
  </div>
   <h1>v-bind指令</h1>
  <div class="div" v-bind:class="{'aa': use}">
     <div>
       <p>修改div颜色<input type="checkbox" v-model="use"></p>
     </div>
  </div>
    <h1>v-if指令</h1>
    <div class="v-if">
    <p v-if="show">通过相关标识指令的值来判断是否插入值：</p>
        <template v-if="yes">
          <p>这是当标识指令值为true时插入的值</p>
        </template>
    </div>
    <h1>v-model指令</h1>
    <div class="v-model">
      <p>{{test}}</p><br />
      <input placeholder="请输入值测试" v-model="test"/>
    </div>
    <h1>事件绑定</h1>
    <button v-on:click="dianji()" class="dianji">点我试试？</button>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script>
//基本语法
new Vue({
	el:'#vue',
	data:{
		show:'Holle, this is VueDome'
		}
	})
//定义data属性
var VueData={one:"第一个值",two:"第二个值"}
var vu=new Vue({
	el:'#VData',
	data:VueData
	});
console.log("测试VueData的部分值"+vu.$data.one);
//指令
//v-html指令
new Vue({
	el:'.v-html',
	data:({
		 neirong:"这是v-html指令"
		})
	});
//v-bind指令
new Vue({
	el:'.div',
	data:{
		use: false
		}
	});
//v-if
new Vue({
	el:'.v-if',
	data:{
		show:true,
		yes:true
		}
	});
//v-model 
new Vue({
	 el:'.v-model',
	 data:{
		 test:''
		 }
	});
//事件绑定
new Vue({
	el:'.dianji',
	methods:{
		dianji:function(){
			alert("好嘛 你点了我一下")
			}
		}
	})
</script>
</html>

----------------------------------------------------------------事件监听、指令实例代码

这里主要用到指令v-on、v-bind、v-model、watch监听、v-for循环`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vue事件监听</title>
<style>
   .mian{
	   width:500px;
	   height:500px;
	   margin:0 auto;
	   border:solid #000 1px;
	   }
	.huansuan{
		width:100%;
		text-align:center;
		}
	.shop{
		width:100%;
		text-align:center;
		}
	.shop table{
		width:100%;
		text-align:center;
		}
</style>
</head>
<body>
<div class="mian">
  <div class="huansuan">
    <h3>米与千米的单位换算</h3>
        <label>米:</label><input placeholder="输入米值" v-model="mi"/>
        <label>千米:</label><input placeholder="输入千米值" v-model="qianmi"/><br /><hr />
  </div>
  <div class="shop">
     <table>
        <tr>
          <td>商品名称</td>
          <td>商品价格</td>
          <td>购买数量</td>
          <td>操作</td>
        </tr>
        <tr v-for="shopInfo in shopInfo">
          <td>{{shopInfo.shop_name}}</td>
          <td>{{shopInfo.shop_prise}}</td>
          <td><button v-bind:disabled="shopInfo.shop_size===0" v-on:click="shopInfo.shop_size-=1">-</button>{{shopInfo.shop_size}}<button  v-on:click="shopInfo.shop_size+=1">+</button></td>
          <td><button  v-on:click="shopInfo.shop_size=0">清空</button></td>
        </tr>
     </table><hr />
     <p>当前总价￥{{allprise()}}元</p>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script>
new Vue({
	el:'.huansuan',
	data:{
		mi:0,
		qianmi:0
		},
		watch:{
			mi:function(val){
				this.mi=val;
				this.qianmi=this.mi*1000;
				},
			qianmi:function(val){
				this.qianmi=val;
				this.mi=val/1000;
				}
			}
	});
var shops=new Vue({
	el:'.shop',
	data:{
		shopInfo:[{
			shop_name:'苹果手机',
			shop_prise:3333,
			shop_size:0
			},{
			shop_name:'小米手机',
			shop_prise:8888,
			shop_size:0
				},{
			shop_name:'华为手机',
			shop_prise:7777,
			shop_size:0
					},{
			shop_name:'oppo手机',
			shop_prise:6666,
			shop_size:0
						},{	
			shop_name:'vivo手机',
			shop_prise:5555,
			shop_size:0}]
		},
		//计算总价
		methods:{
			allprise:function(){
				var allprise =0;
				for(var i=0,len=this.shopInfo.length;i<len;i++){
					allprise+=this.shopInfo[i].shop_prise*this.shopInfo[i].shop_size;
					}
				return allprise;
				}
			}
	});
</script>
</html>

关于Vue路由、ajax请求、或更多可以浏览Vue-菜鸟教程
https://www.runoob.com/vue2/vue-tutorial.html