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">
<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>
<h2>{{counter%2==0?'是':'否'}}</h2><br>
<h2 v-once>{{counter}}</h2><br>
<button @click="add" type="button">+</button>
<button @click="sub" type="button">-</button>
<h1 v-html="url"></h1>
<h1 v-pre>{{counter}}</h1>
<h1>{{object.firstName+' '+object.name}}</h1>
<h1>{{getFullName()}}</h1>
<h1>{{fullName_02}}</h1>
<h1>totalPrice:{{totalPrice}}</h1>
<h1 v-cloak>hello {{counterx}}</h1>
<img v-bind:src="pic"/>
<h2 :class="getClass()" @click="change">啊哈哈</h2>
<div @click="divClick">
aaaaaa
<button @click.stop="btnClick" type="button">按钮</button>
</div>
<br>
<form action="https://www.baidu.com" method="post">
<input type="submit" @click.prevent="customSend2Server" value="提交"/>
</form>
<h2 @click.once="customSend2Server">ONCE</h2>
<ul>
<li v-if="score<60">不及格</li>
<li v-else-if="score>=60 && score<80">及格</li>
<li v-else>优秀</li>
</ul>
<span style="color: red;" v-if="isShow">V-IF</span><br>
<span style="color: #4476A7;" v-show="isShow">V-SHOW</span><br>
<button type="button" @click="toggle">切换显示</button>
<ul v-for="(book,index) in books">
<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>
<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>
<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>
<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>
<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>
<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>
<input type="number" v-model.lazy.trim.number="testXSF" />
<h1>{{testXSF}}----{{typeof testXSF}}</h1>
<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的块级作用域,在作用域外面只读,不可写 -->
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';
const num = 1;
const arr = ['s','b','c'];
arr[0] = 'bbbb';
console.log('arr[0]='+arr[0]);
const demo = {id:1,name:'zs',age:20};
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:{
fullName:function(){
return this.object.firstName + ' ' + this.object.name;
},
fullName_02:{
set:function(newValue){
console.log(newValue);
},
get:function(){
return this.object.firstName + ' ' + this.object.name;
}
},
totalPrice:function(){
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(){
<!-- 操作数组的响应式方法,能更新页面的方法-->
<!-- splice作用 删除/插入/替换元素-->
<!--Vue自带的方法set为响应式方法-->
Vue.set(this.array,0,'vue==========');
}
}
});
</script>
</body>
</html>