1、vue基础示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础指令</title><script src="../vu/js/vue.js"></script><style>.box1{width: 150px;height: 150px;background-color: red;text-align: center;line-height: 150px;}.box2{width: 200px;height: 200px;background-color: blue;text-align: center;line-height: 200px;}.font{font-size: 20px;}.back{background-color: orange;}.color{color: blue;}.clsIn{background-color: red;text-align: center;width: 200px;height: 200px;line-height: 200px;}.clsOut{background-color: orange;text-align: center;width: 200px;height: 200px;line-height: 200px;}</style>
</head>
<body><!--插值语法示例-->
<div id="insertValue"><p>插值语法</p><hr><p>{{str}}</p><p>这是一个数字插值: {{num}}</p><p>这是一个数组插值语法根据索引取值:{{arr[0]}}</p><p>这是一个对象插值:{{obj.c}}</p>
</div><!--v-html和v-text示例-->
<div id="htmlText"><hr><p>文本指令</p><hr><!--将v-html:htmlText功能里面的data html变量里面的input渲染成html标签语法--><h3>v-html指令</h3><p v-html="html"></p><h3>v-text指令</h3><!-- v-text渲染成字符串， 如果p标签里面有内容v-text会把<p>测试</p>内容替换--><p v-text="content">这是老而v-text</p><hr><h3>v-show和v-if指令</h3><!-- v-show:如果是false 对内容或设置的样式不进行显示，但是标签存在，会将标签样式设置为display: none --><!-- v-if:如果是false 对内容或设置的样式不进行显示，但是标签不存在(注：删除和添加标签，效率低) --><div class="box1" v-show="b1">v-show-class-box1</div><p>v-if指令</p><div class="box2" v-if="b2">v-show-class-box2</div>
</div><!--点击事件on-click(注：@click)和v-bind示例-->
<div id="onBind"><hr><h3>这个是v-on:</h3><button v-on:click="handledClick">点击显示alert</button><!--v-on:click="handledClick" 可以写 @click="handledClick"--><button @click="handledClick">点击</button><hr><h3>v-bind</h3><img v-bind:src="url" alt=""><hr><h3>结合点击事件click和bind图片进行切换</h3><img v-bind:src="url" alt="" @click="imgClick">
</div><hr>
<h3>style和class指令绑定css样式示例</h3>
<div id="styleClass"><hr><div><h3>:class指定绑定css样式</h3><p :class="fontSize">字符绑定class指令 css类class字体大小</p><p :class="arrClass">数组绑定class指令，css类class 字体大小，字体颜色，背景色</p><p :class="objClass">对象绑定class指令，css类class 字体大小，字体颜色</p></div><hr><div><h3>:style指定绑定style属性css样式</h3><p :style="styleStr">字符串绑定style指定实现style属性css样式字体大小，字体颜色</p><p :style="styleList">数组绑定style指令实现style属性css样式字体颜色，背景色</p><p :style="styleObj">数组绑定style指令实现style属性css样式字体颜色，字体大小，背景色</p></div>
</div>
<hr>
<h3>v-if条件渲染和v-for循环渲染</h3>
<div id="forIf"><div><h5>条件判断显示正确而数据渲染</h5><!--v-if:代码开始的if判断, 代表的else if或elif判断 v-else：else判断--><!--根据条件判断正确的显示--><p v-if="score >= 90">优秀</p><p v-else-if="score > 70 && score < 90">良好</p><p v-else-if="score > 60 && score < 70">及格</p><p v-else>差</p></div><h5>v-for循显示数据</h5><div><p>循环列表显示数据</p><ul><li v-for="item in list">{{item}}</li></ul><p>循环列表数据值和索引号</p><ul><!--item代表获取数据值 index代表的索引,索引从0开始（注: 位置不能换，第一个只能是值，第二个索引--><li v-for="(item, index) in list">{{index}}: {{item}}</li></ul><p>循环对象获取key和值</p><ul><!-- v-for循环对象value:代表获取对象的值,key:代表获取对象的key--><li v-for="(value, key) in obj">{{key}}: {{value}}</li></ul><ul><!--v-for循环对象单独变量获取对象是值--><li v-for="value in obj">{{value}}</li></ul></div>
</div>
<hr>
<h3>v-model双向绑定示例</h3>
<div id="model"><!--v-model：数据会根据变化而变化v-model.lazy: input框内输入完后鼠标移除input框后内容才会显示v-model.number：input框内开头是数字后面输入字母或字符，字母或字符不会取值。如果开头是字母会正常显示v-model.trim：去除两侧空白--><h5>v-model随着数据变化而变化</h5><p><input type="text" v-model="bind">{{bind}}</p><h5>v-model.lazy离开input框数据发生变化</h5><p><input type="text" v-model.lazy="bindLazy">{{bindLazy}}</p><h5>v-model.number input框中开头输入数字后面数据内容不会取值显示，如果开头字母或字符正常取值显示</h5><p><input type="text" v-model.number="bindNumber">{{bindNumber}}</p><h5>v-model.trim 去除input框输入内容两侧空白</h5><p><input type="text" v-model.trim="bindTrim">{{bindTrim}}</p>
</div>
<hr>
<h3>blur change input事件示例</h3>
<div id="blurChangeInput"><p><input type="text" v-model="blur" @blur="blurClick"></p><p><input type="text" v-model="change" @change="changeClick"></p><p><input type="text" v-model="input" @input="inputClick"></p></div>
<hr>
<h3>动态背景颜色切换</h3>
<div id="mousemove"><!--mousemove鼠标移近发生变化，mouseout鼠标移除发生变化--><div :class="cls" @mousemove="seMove" @mouseout="seOut">OK</div>
</div><hr>
<div id="clickModify"><h1>点击子标签，父标签的事件也触发，事件冒泡</h1><ul @click="handledUl"><!--@click.stop:只处理自己的事件,不再冒泡到父标签 --><li @click.stop="handledLi">第一次点击</li><li>点击触发父标签冒泡</li></ul><h1>子标签的冒泡不处理：父标签写self, 父标签只处理自己的事件，冒泡的事件不管</h1><!--@click.self：只处理自己的事件，子控件冒泡的事件不处理--><ul @click.self="handledUl"><li @click.stop="handledLi">第一次点击</li><li>第二次点击</li></ul><h1>阻止a标签的跳转</h1><!--@click.prevent:阻止a标签的跳转--><a href="https://www.baidu.com" @click.prevent="handledA">点击跳转到百度</a><h1>只能点击1次</h1><!--@click.once:只能点击1次，如果需要多次点击需要刷新才可以点击--><button @click.once="handledBut">点击获取</button></div></body>
<script>var insertValue = new Vue({el: "#insertValue", // /根据id找到div，这个div就是被vue托管data: {str: "这是一个插值字符串",num: 10,arr: ['A', 'B', 'C'],obj: {c: 100, d: 200},}})var htmlText = new Vue({el: "#htmlText",data: {html: '<input type="text">',content: '新的v-text指令',b1: false,b2: true,}})var onBind = new Vue({el: "#onBind",data:{url: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',url_list: ["http://gips0.baidu.com/it/u=2298867753,3464105574&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280","http://gips1.baidu.com/it/u=1410005327,4082018016&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280","http://gips2.baidu.com/it/u=1192674964,3939660937&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",]},methods:{handledClick(){alert("这个是点击显示alert内容")},imgClick(){this.url=this.url_list[Math.floor(Math.random()*3)]}}})var styleClass = new Vue({el: '#styleClass',data: {// 1-1 class指令绑定css样式// 字符串方式fontSize: '',// 推荐使用数据组进行css class类样式设置arrClass: ['font', 'color', 'back'],// 对象方式绑定class类样式。注：font, color, back代表css样式类，true代表使用此类，false代表不使用objClass: {font: true,color: true,back: false,},// style指定字符串模式绑定style属性实现css样式styleStr: "font-size: 30px; color: red",// 数组方式styleList: [{color: "green"}, {backgroundColor: "red"}],// 对象方式, 推荐使用对象方式进行style样式设置styleObj: {color: "red",backgroundColor: "green",fontSize: "35px",}}})var forIf = new Vue({el: "#forIf",data: {score: 65,list: ['A', 'B', 'C', 'D'],obj: {beijing: "北京",shanghai: "上海",shenzhen: "深圳",}}})var model = new Vue({el: "#model",data: {bind: "",bindLazy: "",bindNumber: "",bindTrim: "",}})var blurChangeInput = new Vue({el: "#blurChangeInput",data: {blur: "鼠标移开失去焦点事件",change: "数据发生变化触发事件",input: "输入内容触发事件",},methods: {blurClick(){console.log(this.blur)},changeClick(){console.log(this.change)},inputClick(){console.log(this.input)}}})var mousemove = new Vue({el: "#mousemove",data: {// 绑定css 样式类，将样式类分别设置为true,falsecls: {clsIn: true, clsOut: false}},methods: {seMove(){// 鼠标移进将this.cls.clsIn=falsethis.cls.clsOut = true},seOut(){this.cls.clsIn=truethis.cls.clsOut = false}}})var clickModify = new Vue({el: "#clickModify",data: {},methods:{handledLi(){console.log("li被点击")},handledUl(){console.log("触发ul父标签冒泡")},handledA(){console.log("禁止访问")},handledBut(){alert("只能被点击一次，在点击需要刷新")}}})
</script>
</html>
