vue教程,小白编程-小程序开发教程,APP开发教程,网站开发教程,H5开发教程,3天快速开发

VUE教程JS常用扩展

本文学习VUE的框架结构及常用属性使用方法，若对JS、JSON、VUE完全不熟悉的请按JS、JSON、VUE顺序做基础了解，网上教程很多这里不反复讲了，菜鸟教程JS篇，菜鸟教程JSON篇，菜鸟教程VUE篇

网页使用VUE的框架结构与HBuilder开发APP使用VUE的结构稍有差别，属性的使用方式是一样的，需熟悉vue以下几个常用的属性

created 与 mounted(不常用)

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

*某些时候需要在页面渲染完成后再调用的方法需放在mounted里面执行

methods 与 computed(不常用)

methods：Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，只执行逻辑，返回值可有可无。

computed：计算属性，计算的结果不发生改变就不会触发，必须return返回一个变量值并在DOM中绑定该变量，computed可以用methods替代

*VUE改变data里面的变量值： this.变量名，调用methods里面的方法：this.方法名()

<script>   
//网页使用VUE的结构
   new Vue({
            el: '#data', //页面内的id值，注意页面内id名称不能相同
            data:{//data里面存放页面内需要使用的变量
                one:' ',  //变量名:存放变量值，注意 小写逗号，
                two:' ', 
                goodsList:[],//变量名:存放变量值，变量值如果是JSON数组 用 []，json对象用{}，一个值用''
            },
            computed:{},//计算属性
            created(){},//最常用的属性，首次打开页面时自动调用created()里面的方法或参数赋值到data里面再渲染进页面
            methods: {   //这里面放置js方法，各个方法间用逗号隔开，不调用不会执行，调用 this.xx();
               ac(){
                   //写方法内容，比如改变data里面one的值
                   this.one='3';
               },    
               bc(){}
            }
    })

//HBuilder开发APP使用VUE的结构    
  export default {
        data() {
			return {
			    one:' ', 
                two:' ', 
                goodsList:[],
			}
		   },
		   computed:{},
		   onShow(){},//每次回到页面都会调用这里面的方法或参数
           onLond(){},//最常用的属性，相当于 created()  
           methods: {//这里面放置js方法,如  ac(){}
               ac(){}  
            }
   }
</script>

下面来学习vue常用的几个属性

一、数据绑定，标签上使用变量或表达式需在前面加冒号 :

1.直接绑定：{{ 变量名 }}，花括号内也可以放表达式

2.循环绑定：v-for=(任意名称,index) in json数组 :key="index"，当解析的对象是json数组时[]，需使用循环绑定解析

数据绑定顺序：打开页面时，首先自动调用data里面变量的默认值显示到页面，如果调用了方法改变了data里面变量的值，再自动把变量改变后的值显示到页面

<div id="data">
    
   
   <p>{{ name }}</p>
   
   <p>{{ price | toFixed }}</p>
   
   
   <div v-for="(item,index) in goodsList" :key="index">
       <p>{{ item.name }}，{{item.url}}</p>
   </div>
   
</div>
<script src="https://www.vipgoal.cn/js/vue.min.js"></script>
<script>              
   new Vue({
            el: '#data', 
            data:{
                name:'', //未设默认值 
                price:'10', //设默认值
                goodsList:[]
            },
            filters: {//过滤器函数，调用后将对变量或数组统一处理
	            toFixed:function(x) {
	  	          return parseFloat(x).toFixed(2);//保留两位小数
	            }
	        },
            computed:{},
            created(){
                this.ac();
            },
            methods: {   
               ac(){
                 this.name="我是name";  
                 this.goodsList=[{"name":"教程","url":"www.vipgoal.cn","s":"学的是梦想"},{"name":"教程22","url":"www.vipgoal.cn22","s":"学的是梦想22"}];  
               },    
               bc(){}
            }
    })
</script>

二、表单数据绑定

input、textarea、select等标签均需使用 v-model 实现双向数据绑定

三、动态绑定CSS样式、三元运算符的使用

1.动态class，:class="条件"

2.动态style，:style="条件"

四、v-if判断写法、绑定点击事件@click、阻止点击冒泡 @click.stop

<div id="data">
        

<p v-if="one>10">a</p>
<p v-else-if="one<=10 && one>5">b</p>
<p v-else>c</p>

<p>{{ one>10 ? 'a' : one<=10 && one>5 ? 'b' : 'c'}}

<div v-for="(n,index) in goodsList" :key="index" @click="ok(index,n)">
    <p style="padding-top:5px">{{ n }} 点击我</p>
    <p style="padding-top:5px"@click.stop="ck()">阻止冒泡点击我</p>
</div>

</div>

<script src="/js/tan.min.js" charset="utf-8"></script>
<script src="https://www.vipgoal.cn/js/vue.min.js"></script>
<script>              
   new Vue({
            el: '#data', 
            data:{
                one:10,
                goodsList:[]
            },
            computed:{},
            created(){
                this.ac();
            },
            methods: {   
               ac(){ 
                 this.goodsList=[{"name":"教程","url":"www.vipgoal.cn","s":"学的是梦想"},{"name":"教程22","url":"www.vipgoal.cn22","s":"学的是梦想22"}];  
               },
               ok(n,i){
                   //n的值是json数组的下标，同上面的index一致，i的值是@click点击后传来的json数组goodsList里面的json对象{}，取json对象值 i.key名
                   ui.msg(n+','+i.name);//ui.alert是写的弹框样式，点击弹出i.name
                   //n值很有用处，有时需要点击后改变goodsList数组里面对应对象的某个值，如下改变原来数组对应对象的name值，加个延时改变更好体现
                   setTimeout(()=>{//延时1.5秒后执行
                   //字符串拼接后赋值给数组里面对应对象的name，注意赋值后，goodsList数组原来的name值将被替换，也就意味着原来的name值你无法得到了
                   this.goodsList[n].name='我由 '+i.name+' 变成 33 了';
                   }, 1500);
               },
               ck(){
                   //这里没有传值，直接取one显示
                   ui.msg(this.one);
               }
            }
    })
</script>

至此vue常用属性基本学习完成了，下面我们举两个例子使用vue赋值，吃透这两个例子基本上就能使用vue开发网站、APP了

1.体验vue变量赋值过程、computed计算属性

<div class="a"id="news">
    
    
   <div class="a1">{{ title }}</div>

<div class="a2">总价：{{totalprice}}</div>
   
   <div class="a2">
      <span @click="jia('jian')"style="padding:0 20px;background:#ccc;">-</span>
      <span style="padding:0 20px;">{{num}}</span>
      <span @click="jia('jia')"style="padding:0 20px;background:#ccc;">+</span>
   </div> 
   
</div>

2.体验vue循环赋值 v-for 过程、条件编译 v-if 过程

<div class="bsc"id="news">
    
 <p style="font-size:14px;font-weight:700">{{ goodsList.name }}</p>       
 <div class="b1">
     
      
  <div class="b11" v-for="(item,index) in goodsList.about" :key="index" @click="dianji(item)">
        
     
    <img :src="item.img"style="width:100%;max-height:200px;">
    <div class="b13">{{item.title}}</div>
    <div class="b14">
        <span style="font-size:15px;color:#ff0033;">￥{{item.price}}元</span>
        <span style="color:#999;" v-if="index!=2">已售 {{item.num}}件</span>
    
    </div>
    
  </div>
  
 </div> 
</div>

至此，vue常用的几个属性你已经了解及掌握了