《Vue的基本语法》
程序员文章站
2022-06-22 16:34:27
Vue的基本语法Vue入门Vue入门
Vue的基本语法
Vue入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.acticve{
color: red;
}
.def{
color: #00FF00;
}
</style>
</head>
<body>
<div id="app">
<!-- v-for 遍历数组 -->
<!--:class的对象语法 ===> {key(样式名): value(布尔值),key: value...} -->
<!--:style的对象语法 ===> {key(属性名): value(属性值),key: value...} -->
<!--求解？ 默认下标0的元素为红色字体，后续点击哪个元素，哪个元素就变红，其它变为原色？？？ -->
<!-- 方法一 正常思想-->
<!--
:id="['li_'+index]"
@click="changeClass(index)"
:class="{acticve: index==0}"-->
<!-- 方法二 currentIndex思想 -->
<ul>
<li :id="['li_'+index]"
@click="current(index)"
:class="{acticve: index==current_index}"
v-for="(item,index) in array"
:style="{fontSize: object.finalSize+'px'}">
{{index}}-{{item}}
</li>
</ul>
<button @click="addOrdel" type="button">动态添加或删除数组中元素</button>
<!-- mustache语法-->
<h2>{{counter%2==0?'是':'否'}}</h2><br>
<!-- v-once:始终显示第一次解析的值 -->
<h2 v-once>{{counter}}</h2><br>
<!--v-on:click || @click : 点击事件 -->
<button @click="add" type="button">+</button>
<button @click="sub" type="button">-</button>
<!-- v-html: 解析带html标签的文本 -->
<h1 v-html="url"></h1>
<!-- v-pre: 将里面的文本，原封不动的显示，不进行解析 -->
<h1 v-pre>{{counter}}</h1>
<h1>{{object.firstName+' '+object.name}}</h1>
<!-- 直接引用vue中的方法 -->
<h1>{{getFullName()}}</h1>
<!-- 直接使用Vue中的计算属性库computed中的fullName -->
<h1>{{fullName_02}}</h1>
<!-- computed中对对象数组的属性进行计算 -->
<h1>totalPrice:{{totalPrice}}</h1>
<!-- v-cloak:当js代码出现问题或引用出现问题，mustache语法块 不会显示 -->
<!-- 引用有内容就显示，没内容就显示空白 -->
<h1 v-cloak>hello {{counterx}}</h1>
<!-- v-bind 给标签绑定一个具体的值 简写 : -->
<img v-bind:src="pic"/><!--或者使用语法糖 <img :src="pic" > -->
<!-- css的名字:布尔值 布尔值为true的时候就显示该class属性-->
<!-- 动态绑定class属性 -->
<h2 :class="getClass()" @click="change">啊哈哈</h2>
<!-- v-on 的修饰符 stop 只执行自己（按钮）的点击事件,不执行包裹它的div的点击事件-->
<div @click="divClick">
aaaaaa
<button @click.stop="btnClick" type="button">按钮</button>
</div>
<br>
<!-- v-on的 prevent修饰符 阻止默认行为 -->
<form action="https://www.baidu.com" method="post">
<input type="submit" @click.prevent="customSend2Server" value="提交"/>
</form>
<!-- v-on的 once修饰符 该事件只触发一次，刷新页面可重置-->
<h2 @click.once="customSend2Server">ONCE</h2>
<!-- v-if
v-else
v-else-if -->
<ul>
<li v-if="score<60">不及格</li>
<li v-else-if="score>=60 && score<80">及格</li>
<li v-else>优秀</li>
</ul>
<!-- v-if 和 v-show的区别 -->
<!-- v-if 当为false的时候该span标签就会被删除 -->
<span style="color: red;" v-if="isShow">V-IF</span><br>
<!-- v-show当为false的时候该span标签的style属性会被加上 display:none;的属性 -->
<span style="color: #4476A7;" v-show="isShow">V-SHOW</span><br>
<button type="button" @click="toggle">切换显示</button>
<!-- v-for 遍历对象集合 -->
<!-- 绑定key和不绑定key,key的作用就是作为每一个节点的唯一标识,提高Vue更新虚拟DOM的效率-->
<ul v-for="(book,index) in books">
<!-- 下面的index是属性的下标 key代表属性名，value代表属性值 -->
<li id="['ul_li'+'_'+book.id]"
@click="showKey(['ul_li'+'_'+book.id])"
v-for="(value,key,index) in book"
:key="['li'+book.id]">
{{key + ':' + value + '-' + index}}
</li>
</ul>
<!-- v-model双向绑定（表单） -->
<form action="#" method="post">
<label for="name">姓名</label>
<input type="text" id="name" v-model="username"/>
<label for="password">密码</label>
<input type="password" id="password" v-model="password"/>
</form>
<h2>姓名:{{username}}</h2>
<h2>密码:{{password}}</h2>
<!-- v-model双向绑定 单选框 绑定同一个字符串变量实现互斥 -->
<label>
<input type="radio" value="篮球" v-model="like">
篮球
</label>
<label>
<input type="radio" value="足球" v-model="like">
足球
</label>
<label>
<input type="radio" value="羽毛球" v-model="like">
羽毛球
</label>
<label>
<input type="radio" value="乒乓球" v-model="like">
乒乓球
</label><br>
<h1>你选中的是:{{like}}</h1>
<!-- v-model双向绑定 多选框 绑定同一个数组，实现共享 -->
<label>
<input type="checkbox" value="苹果" v-model="manyArr">
苹果
</label>
<label>
<input type="checkbox" value="橘子" v-model="manyArr">
橘子
</label>
<label>
<input type="checkbox" value="梨子" v-model="manyArr">
梨子
</label>
<h1>你选中的是:{{manyArr}}</h1>
<!-- v-model集合select使用-->
<select v-model="so">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<h2>你选中的字母是: {{so}}</h2>
<!-- 多选 绑定数组 并声明multiple-->
<select v-model="somany" multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<h2>你选中的字母是: {{somany}}</h2>
<!-- v-model的修饰符 lazy 延迟绑定，敲下回车或者输入框失去焦点就会立即绑定
trim 去出输入值的前后空格
number 不加number的时候，输入数字显示类型是String，加了number之后显示的类型是Number-->
<!--typeof 判断一个变量的类型 -->
<input type="number" v-model.lazy.trim.number="testXSF" />
<h1>{{testXSF}}----{{typeof testXSF}}</h1>
<!-- Vue过滤器的使用 -->
<h1 style="color: red;">{{username | nameFilter}}</h1>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--js中的函数式编程 -->
const oldarr = [0,20,30,50,100,200];
let rt = oldarr.filter(n => n<=50).map(n => n*2).reduce((pre,value)=> pre+value);
console.log(rt+'=========');
<!--将let 看成更完美的var let具有if和for的块级作用域，在作用域外面只读，不可写 -->
// if(true){
// let name ='zs';
// func = function(){
// console.log(name);
// }
// }
// name = 'dasdsada';
// func(); //var name 打印 dasdsada let name 打印 zs
let obj = {
finalSize:'50',
minSize:'10',
bule:'blue',
firstName:'james',
name:'tom',
run(){
console.log('run ...')
},
stop(){
console.log('stop...')
}
}
<!-- const 关键字的使用 类似于java中的final关键字,基本数据类型和字符串赋值后无法被修改，对象类型和数组类型被初始化后，不能修改内存地址-->
const name = 'zs';
const age = 12;
const salary = 1220;
//属性注入
const student = {name,age,salary};
console.log('student = '+JSON.stringify(student));
const namex = 'dasd';
//namex = 'dsadsad';//报错
const num = 1;
//num = 0;报错
const arr = ['s','b','c'];
//arr = ['ssss'];//报错
arr[0] = 'bbbb';
console.log('arr[0]='+arr[0]);
const demo = {id:1,name:'zs',age:20};
//demo = {};//报错
demo.id = 3;
console.log(demo);
const vue = new Vue({
el:'#app',
data:{
array:['zs','ls','ww','xq','zl'],
username:'zs',
password:'123456',
like:'篮球',
manyArr:[],
so:'e',
somany:[],
testXSF:'',
counter:0,
url:'<a href="https://www.baidu.com">百度</a>',
pic: 'https://cn.vuejs.org/images/dcloud.gif',
isActive:true,
isDefault:false,
object:obj,
score:90,
isShow:true,
books:[
{id:100,name:'java从入门到精通',price:100},
{id:101,name:'python从入门到精通',price:200},
{id:102,name:'c++从入门到精通',price:300},
{id:103,name:'php从入门到精通',price:222}
],
current_index:0
},
//computed 计算属性 实际也是一个函数库
//computed 计算属性 会对结果进行缓存，如果方法里面的属性没发生变化的话，会调用缓存，性能优于methods
//methods 中的方法 使用几次，方法就会被调用几次
computed:{
fullName:function(){
return this.object.firstName + ' ' + this.object.name;
},
//计算属性的set和get方法,在浏览器控制台，Vue实例名.fullName_02 调用get方法，Vue实例名.fullName_02= 'xxxx'调用set方法
fullName_02:{
set:function(newValue){
console.log(newValue);
},
get:function(){
return this.object.firstName + ' ' + this.object.name;
}
},
totalPrice:function(){
// let result = 0;
// //let 子元素 of 数组 语法
// for(let book of this.books){
// result += book.price;
// }
// return result;
return this.books.reduce((pre,book) =>pre+book.price,0);
}
},
//过滤器
filters:{
nameFilter:function(value){
return '姓名:'+value;
}
},
//组件
components:{
},
methods:{
add: function(){
console.log('add..');
this.counter++;
},
sub: function(){
console.log('sub...');
this.counter--;
},
change:function(){
this.isActive = !this.isActive;
},
getClass:function(){
return {acticve:this.isActive , def:this.isDefault}
},
changeClass:function(e){
let current = document.getElementById('li_'+e);
let current_className = current.className;
if(current_className == ''){
let childs = current.parentNode.childNodes;
for (let i = 0; i < childs.length; i++) {
childs[i].removeAttribute('class')
}
current.setAttribute('class','acticve');
}else{
current.removeAttribute('class');
}
},
getFullName:function(){
return this.object.firstName + ' ' + this.object.name;
},
divClick:function(){
console.log('divClick======')
},
btnClick:function(){
console.log('btnClick======')
},
customSend2Server:function(){
console.log('customSend2Server.....')
},
toggle:function(){
this.isShow = !this.isShow;
},
showKey:function(val){
alert(val);
},
current:function(index){
this.current_index = index
},
addOrdel:function(){
<!-- 操作数组的响应式方法，能更新页面的方法-->
//往数组尾部插入N个元素
//this.array.push('aaaaaaa');
//this.array.push('a','b','c');
//删除数组的最后一个元素
//this.array.pop();
//删除数组的第一个元素
//this.array.shift();
//往数组头部插入N个元素
//this.array.unshift('xxxxxxxxxxxxx','yyyyyyyyy');
<!-- splice作用 删除/插入/替换元素-->
//从第几个下标开始，一次删除几个元素
//this.array.splice(0,2);
//this.array.splice(0,this.array.length)
//从下标0开始替换2个元素，替换为'a'和'b'
//this.array.splice(0,2,'a','b');
//从下标0开始替换2个元素，变为一个元素'a'
//this.array.splice(0,2,'a');
//从下标零开始插入元素 第一个参数表示数组的下标，第二个参数给0表示插入，后面跟着待插入的元素
//this.array.splice(0,0,'a','b','c')
//将数组中的元素进行倒叙
//this.array.reverse();
//this.array.sort()
//这个不是响应式的,改变数组元素，页面不会刷新 ！！！
//this.array[0] = '00000000';
// this.array.splice(0,1,'00000000');//响应式
<!--Vue自带的方法set为响应式方法-->
//响应式 param1:修改的对象，param2:下标 param3: 修改的值
Vue.set(this.array,0,'vue==========');
}
}
});
</script>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_43766298/article/details/107396126