Vue.js基本操作语法

v-if、v-else:

vue模型数据：
userlist:[ 
          {user:{name:"huang1", age:10}},
          {user:{name:"huang2", age:20}},
          {user:{name:"huang3", age:30}}
          ]
视图：
<li v-for="item in userlist">
 	<div v-if="item.user.name== 'huang1'" style="color:red">{{item}}</div>
     <div v-else="" style="color:green">{{item}}</div>
</li>

v-for:

//item是循环对象的子元素， index是基0的下标
<ul>
	 //循环数组
     <li v-for="(item, index) in list ">{{item}}--{{index}}</li>
     //循环json对象   value是属性值， key是属性
     <li v-for="(value,key) in user">{{key}}:{{value}}</li>
</ul>

v-bind(简写 :属性):

表示该属性的值引用vue模型中的数据或者部分引用

//:src属性引用vue中的bean.id
<img height="40px"  :src="'img/category/'+bean.id+'.jpg'">

v-text:

解决插值表达式闪烁的问题
如：防止你网速较慢时，{{name}}未加载到vue.js时页面会显示{{name}}, 然后加载到vue.js后赋值了期间的闪烁问题（所以显示数据最好用v-text）

 <span v-text="name"></span>

v-model:

数据的双向绑定， 模型数据改变， 视图数据也改变； 视图数据改变， 模型数据也改变。
v-model仅适用于：
input
select
textarea
components（Vue中的组件）

<input type="text" v-model="num1">
//输入的数据转换成数字类型
<input type="text" v-model.number="num1">
//输入的数据去除首尾的空格
<input type="text" v-model.trim="num1">

前端请求映射， 但不需要返回数据时：

location.href="alipay?oid="+oid+"&total="+total;

axios语法：

	//get请求---获取
	//url代表映射地址, 注意这是 get 请求， 后端要用 @GetMapping 注释接收， 以下如是
	axios.get(url).then(function(response) {
    	//.....................                    
    });
	
	//post请求---提交
	//data 是要提交的数据
	axios.post(url,data).then(function(response){
        //.....................              
    });
	
	//delete请求---删除
	axios.delete(url).then(function (response) {
		//.....................        								
	);
	
	//put请求---更新
	//data 是要更新的数据
	axios.put(url, data).then(function(response){
        //.....................   
   });

页面引用：

//引用页面
//路径是templates文件下的html路径
//表示引用 top.html中 <div th:fragment="html">.............</div> 的模块
<div th:replace="include/fore/top::html" ></div>
<div th:include="include/fore/top::html" ></div>

其中 th:replace 是包括标签和内容全部换成你引用的内容
     th:include 是只替换标签中的内容

//被引用的页面
<div th:fragment="html">.............</div>

标签条件选择：

//获取 类名为 orderItemPromotePrice 且标签属性 pid =2  span 标签的文本值
var price= $("span.orderItemPromotePrice[pid=2]").text();
//有 orderStatus 属性的标签
a[orderStatus]

鼠标事件：

	//div 表示标签, deleteOrderItem 表示 class
	$("div.deleteOrderItem").click(function(){
		//...................
   	});

键盘事件：

$(".orderItemNumberSetting").keyup(function(){
	//.................................
});

失去焦点：

<input type="password" class="form-control" v-model.trim="bean.password1" @blur="checkPwd">

获取（修改）文本text值（不是标签属性值 ）：

var name= $("#name").text();

var name= $("#name").text("修改的内容");

获取标签（任意）属性值（并改变属性的值）：

//获取该标签属性为 oiid 的值
var oiid = $(this).attr("oiid")
//获取 id 为 email 标签属性为 oiid 的值
var oiid = $("#email").attr("oiid")

//获取 src 属性， 并赋值
$("img.selectAllItem").attr("src","img/site/cartNotSelected.png");

获取标签value属性：

var num= $(".orderItemNumberSetting").val();

获取和插入数据(html)：

//当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
$("#name").html() //获取第一个id=name的内容

//当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
$("#name").html("需要赋予的值") 

获取标签固有属性：

var str7 = $("#link1").prop("action");

隐藏标签：

$("tr.cartProductItemTR[oiid="+deleteOrderItemid+"]").hide()

遍历同类名（class）的标签：

//此种对dom元素操作的函数要放在
//vue.$nextTick(function(){
//	执行代码
//  })
//中
$(".cartProductItemIfSelected").each(function(){
  	if("selectit"==$(this).attr("selectit")){
       //$(this)代表循环个体           
    }
});

//直接对vue数据遍历把
vue.pageInfo.content.forEach(function(value, i){
	if(value.name.length>6){
		value.name = value.name.substring(0,6) + "...";
		alert(value.name);
	}
});

改变 css 样式：

 $("button.createOrderButton").css("background-color","#C40000");

删除标签属性：

$("button.createOrderButton").removeAttr("disabled");

字符串截取：

params = params.substring(1);

字符串中替换某些字符：

// "W3School" 替换字符串中的 "Microsoft"
str.replace(/Microsoft/, "W3School")

// "W3School" 替换字符串中全部的 "Microsoft"
str.replace(/Microsoft/g, "W3School")

字符串转化成整数类型（比较大小）：

var number = parseInt(num);

判断该变量是否为数字：

//是数字 返回 false
//不是数字 返回 true
if(isNaN(num)){
	//..............
}