VUE的学习汇总
VUE的学习汇总
VUE 的特点：
不用操作DOM
单页面应用WEB（asp)
数据驱动视图，只关注数据；
MVVM双向数据绑定；
组件化，复用代码；
VUE的安装：
1.直接通过路径引入，地址：https://vuejs.org/js/vue.min.js;
2.直接下载在本地引入
3.采用npm安装的方式，命名：npm install vue
vue.js不支持IE8及其以下版本；
VUE的使用：
once ,prevent,stop
<div id="app">
{{string}}
<button v-on:click="clicme">once</button>
<button @click="clicme">once</button>
<button @click.once="clicmeonce">once</button> //只触发一次
<a href="http://www.baidu.com" @click.prevent="stopjum">//阻止默认事件触发
<div @click="alert(1)">
<div @click.stop="alert(2)"></div> //阻止冒泡事件，只重复2，不触发1
</div>
<input type="text" v-bind:value="string" @input="inputChange($event)">
<li v-for="(item,index) in objarr">{{item.id}}--{{item.name}}--{{index}}</li>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
string:'',
count:100,
objarr:[
{id:1,name:"zhangsan"},
{id:2,name:"lisi"}
]
},
methods:{
clickme:function(param){
this.string=param;
},
clicmeonce(){
alert("click once");
},
stopjum(){
alert(1);
},
inputChange(e){
this.string = e.target.value;
}
}
});
</script>
v-bind,v-for,v-on,v-cloak:
<style>
.class1{
color:blue;
}
.class2{
color:red;
}
</style>
<div id="app">
<p v-bind:id="idName"></p>
<p :id="idName2"></p>
<p :class="showstyle? 'class1':'class2'></p>
<p :class="{'class1':'showstyle'></p>
<p :style="{color:redval}">pppp</p>
<input type="text" v-model="range">
<input type="range" v-model="range">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
idName:'',
idName2:''
showstyle:false,
redval:"red",
range:100,
timeouter:null
},
methods:{
deleteUser(index){
if(confirm(“是否确认删除？”)){
this.arlist.splice(index,1);
}
},
//输入文本搜素
search(e){
this.arrlist.forEach(m=>m.isShow=true);
var searchtext=e.target.value.toUpperCase();
var filterList=this.arrlist.filter(m=> !m.name.toUpperCase().includes(searchtext);
filterList.forEach(element=>{
element.isShow =false;
});
}
//输入文本500毫秒后自动搜素
search(e){
clearTimout(this.timeouter);
this.timeouter = setTimeout(() =>
{
this.arrlist.forEach(m=>m.isShow=true);
var searchtext=e.target.value.toUpperCase();
var filterList=this.arrlist.filter(m=> !m.name.toUpperCase().includes(searchtext);
filterList.forEach(element=>{
element.isShow =false;
});
},500)
}
});
</script>
v-for,v-if 不能在同一个元素里同时使用，可以使用template 错开使用:
<template v-for="(item,index) in list">
<tr v-if="item.isShow">
<td><lable><input type="checkbox"></lable></td> //全选
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</template>
<tr v-if="list.lenght==0">
<td colspan="6">未获取到数据</td>
</tr>
checkAll(){
this.arrlist.forEach(m=>m.isChecked=this.allChecked);
}
changeCheck(){
var listLength=this.arrlist.lenght;
var checkedLeng=this.arrlist.filter(m=>m.isChecked).length;
if(checkedLeng == listLength){
this.allChecked =true;
}else{
this.allChecked =false;
}
//方法2
if(this.arrlist.some(m=>!m.isChecked))
this.allChecked =false;
else
this.allChecked =true;
//方法三
if(this.list.every(m=>m.isChecked))
this.allChecked =true;
else
this.allChecked =false;
}
filter 过滤器：
在data数据格式，货币，时间，大小写格式
<div id="app">
{{money|price|addText("$")}}
<br>
{{msg|upper}}
{{msg|upper("aaa")}}
{{item.date|timeHelper("yyyy年MM月dd日 HH时mm分ss秒}}
</div>
<script>
Vue.filter("price",function(value){
return value.toFixed(2);//保留2位小数
}
Vue.filter("addText",function(value,text){
return text+value//金额前加人民币符合
}
//日期格式转换
Vue.filter("timeHelper",function(value,format){
// var date=new Date(value);
var res = format.replace("yyyy",date.getFullYear())
.replace("MM",date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1)：date.getMonth()+1) //从0开始，输出04 两位数月
.replace("dd",date.getDate() < 10 ? "0" + date.getDate() ? date.getDate())
.replace("HH",date.getHours() < 10 ? "0" + date.getHours() ? date.getHours())
.replace("mm",date.getMinutes() < 10 ? "0" + date.getMinutes() ? date.getMinutes())
.replace("ss",date.getSeconds() < 10 ? "0" + date.getSeconds() ? date.getSeconds());
return res;
}
var vm=new Vue(){
el:"app",
data:{
money:100,
msg:"hello"
},
filters:{
upper:function(value,text){
return value.toUpperCase()+text;
}
}
}
</script>
日期格式转换timeTranslate.js：
function timeHelper(date,format){
if(date instanceof Date == false)
throw new Error('type error,the type is not Date');
this._date =new Date(date);
}
function toString(date,format)
{
var res = format.replace("yyyy",date.getFullYear())
.replace("MM",date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1)：date.getMonth()+1) //从0开始，输出04 两位数月
.replace("dd",date.getDate() < 10 ? "0" + date.getDate() ? date.getDate())
.replace("HH",date.getHours() < 10 ? "0" + date.getHours() ? date.getHours())
.replace("mm",date.getMinutes() < 10 ? "0" + date.getMinutes() ? date.getMinutes())
.replace("ss",date.getSeconds() < 10 ? "0" + date.getSeconds() ? date.getSeconds());
return res;
}
TimeHelper.prototype.toString = toString;
全局属性：
Vue.prototype.$http =axios;
this.$http
mounted() //页面加载后触发
create() //页面加载前触发
this.$forceUpdate();刷新页面数据；
计算属性：
//对data中的数据进行处理
computed:{
}
监听：watch
过滤：filter:
<div>
<p v-for="item in list" :key="item.id">
<input type="checkbox" v-model=item.isChecked">{{item.name}}
</p>
<input type="text" v-model="user.username">
{{money|price(2)}}
{{money|price(1,2,3,4)}}
</div>
<script>
Vue.filter("price",function(value,val,val2){
return value.toFixed(val);
}
Vue.filter("price",function(value,...val){
return value.toFixed(val);
}
Vue.filter("addText",function(value,text){
return text+value.toFiexed//金额前加人民币符合
}
var vm =new Vue(
{
el:"#app",
data:{
list:[
{id:1,name:"a",isChecked:false},
{id:2,name:"b",isChecked:false},
]
}
watch:{ //监听 必须和变量，方法名一致
list:{
handler:function（newval,oldval){
console.log(newval);
console.log(oldval);
},
deep:true;
};
"user.username":{
handler:function(newval,oldval){
console.log("改变了")；
}
};
user:{
handler:function(newval,oldval){
console.log("改变了")；
},
deep:true
}
}
}
</script>
组件和实例
总结：
1.组件没有el
2.组件中只有唯一一个函数，且有返回值；
3.组件命名需小写，不支持驼峰命名法；
4.组件传值时，属性命名小写，不支持驼峰命名；
5.子组件触发父组件方法时，父组件的注册绑定事件命名小写，不支持驼峰命名；
6.在html中使用组件名称命名全小写，不支持驼峰命名；
<div id="app">
{{parentmsg}} //实例使用
<denny :parentmsg="new value"></denny> //组件使用
<denny></denny> //组件使用
<denny></denny> //组件使用
</div>
<template id="testtemp">
<div>
{{msg}} {{ms} this is test temp {{parentmsg}} //parentmsg 为父组件传值到子组件
</div>
</template>
<script>
//全局组件
Vue.component("denny",{
template:"<h1>{{msg}} this is component denny</h>", // "#testtemp"
props:["parentmsg"] //用于传值
data(){
var ms="this is ms";
return {
msg:"hello",
ms
}
}，
mounted(){
var msg1=this.msg;
var msg2=this.$data.msg;
var {msg，ID} = this.$data;
}
}
//局部组件：
var vm=new Vue({
el:"#app",
data：{
parentMSG:"this is parent"
}，
methods:{
clickme(...param){
console.log(param);// ...param 是数组
}
},
components:{
"ace1":{
template:"<h1>this is {{msg}}</h1>",
data(){
return {
msg:"com",
temmsg:"111"
}
},
props:['parmsg']
},
"ace2":{
template:"<h1>this is {{msg2}}</h1>",
data(){
return {
msg:"com2"
}
}
}
}
})
//组件嵌套,传参
var msg = this.$parent.parentMsg;
mounted(){
this.$emit("this is param1","this is param2");
}
//不同组件间传值
sendMsg(){
var msg=this.$parent.$children[ 0].msg;
var msg2=this.$parent.$children[1].temmsg;
}
//组件插槽
//匿名插槽：
//插槽是子组件提供给父组件使用的一个占位符
//该占位符用slot标签
//插入的代码会自动替换slot
<div id="app">
<ace>这是插槽数据</ace>
</div>
<template id="temp">
<div>
这是子组件
<slot></slot>
</div>
</template>
<script>
Vue.component("ace",{
template:"#temp"
})
var vm=new Vue({
el:"#app",
data：{
}
}
</script>
//具名插槽 :就是占位
//给插槽取个名字，调用时写上名字slot1；
<div id="app">
<ace>
<template v-slot:slot1>
<h1>这是插槽数据</h1>
</template>
<template v-slot:slot2>
<h1>这是插槽数据</h1>
</template>
</ace>
</div>
<template id="temp">
<div>
这是子组件
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</div>
</template>
<script>
Vue.component("ace",{
template:"#temp"
})
var vm=new Vue({
el:"#app",
data：{
}
}
</script>
//默认插槽：子组件定义没有名字的插槽
//父组件会把没指定的插槽填充到默认的插槽中；
//作用域插槽：就是子组件提供给父组件的数据，父组件只能使用在该组件中；
<div id="app">
<ace>
<template slot=“areaslot" slot-scope="data">
<div>
//{{data.userinfo.name}}-{{data.userinfo.age}}
{{data.username}}-{{data.age}}
</div>
</template>
</ace>
</div>
<template id="temp">
<div>
这是子组件
//<slot name="areaslot" :userinfo="user"></slot>
<slot name="areaslot" :username="user.name" :age="user.age"></slot>
</div>
</template>
<script>
Vue.component("ace",{
template:"#temp"
data(){
return {
user:{name:"ace",age:18
}
}
})
var vm=new Vue({
el:"#app",
data：{
}
}
</script>
//路由:vue-router.js
<router-view></router-view>
<script>
onhashchange=function(){
var hash= localtion.hash；
routerPage(has);
}
function routerPage(hashurl){
switch(hashurl){
case "#/page1":
document.querySelector("router-view")innerHTML="这是Page1";
break;
case "#/page2":
document.querySelector("router-view")innerHTML="这是Page2";
break;
}
}
</script>
//路由2
<div id="app">
<router-link to="/page1" tag="button|p">page1</router-link>
<router-link to="/page2/1">page2</router-link>
<button @click="topage">gotto</button>
</div>
<script>
//创建组件
let page1={
template:"<h1>page1</h1>
}
let page2={
template:"<h1>page2</h1>
}
//配置路由规则
var routessss=[
{path:"/",redirect:"/page1"},
{path: "/page1",component:page1},
{path: "/page2/:id|:pid",component:page2,name:"page2}
]
//创建路由实例
var router=new VueRouter({
routes：routessss
})
//挂载路由
var vm=new Vue({
el:"#app",
router,
methods:{
topage(){
this.$router.push({path:"/page4"})
}
}
})
</script>
CDN:
https://cdn.bootcss.com
vue 动画：
<transition>
<div> class='animate-test" v-show="isshow"></div>
<div> class='enter-active-class="enter" leave-active-class="leave" v-show="isshow"></div>
</transition>
v-show="ishow"
v-enter
v-leave-to
v-enter-active
v-leave-active
//setter,getter
<script>
var obj={
$x:0,
get x(){
return $x;
},
set x(value){
$x=value;
}
obj.x=10;
console.log(obj.x);
}
</script>
//实例
var vm=new Vue({
el:"#app",
data：{
parentMSG:"this is parent"
}
})
</script>
asp.net core
启动项目：notnet
dotnet webapidemo.dll --urls="http://*:2020" --
ip="127.0.0.1" --port="2020"
post 传参：
var username="ace";
//var postdata='name=${username}'
var postdata=new URLSearchParams();
postdata.append("name",username);
axios.post("https://localhost:44326/home",postdata).then)function (res)
{
console.log(res.data);
})
get 传参数：
axios.get("https://localhost:44326/home",{params:{name:'ace'}}).then)function (res)
{
console.log(res.data);
})
Post([FromBody] UserInput input)
{
}
