Vue框架

来源：互联网发布：白额高脚蛛淘宝编辑：程序博客网时间：2024/06/06 00:15

菜鸟教程可以下载框架

第一个简单案例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>vuejs案例1</title><script src="../js/vue.js"></script></head><body><h1>vue-hello</h1><div id="app"><p>{{msg}}</p><p>{{m1}}</p></div><script>//创建vue实例new Vue({el:'#app',//绑定容器data:{//数据msg:'hello vue!',m1:'hello'}});</script></body></html>

第二个关于循环和选择以及事件数据绑定案例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>vuejs案例2</title><script src="../js/vue.js"></script></head><body><h1>vue-指令</h1><div id="app"><!-- v-for="变量 in 数据集" --><ul><li v-for="item in arr1">{{ item }}</li></ul><!-- v-for="(value,key)" in 数据集 --><ul><li v-for="(value,key) in arr1">{{ value + "," + key }}</li></ul><!-- 判断指令 --><!-- v-if="布尔表达式" --><p v-if="a>5">55555</p><!-- 双分支 --><p v-if="a>5">大于5</p><p v-else="a<=5">小于或者等于5</p><!-- 多分支 --><p v-if="a>5">大于5</p><p v-else-if="a==5">等于5</p><p v-if="a<5">小于5</p><!-- v-bind --><img v-bind:src="imgUrl" v-bind:title="t"><!-- 数据双向绑定 --><input type="text" v-model="modelData"><p>{{modelData}}</p><!-- vue事件绑定 v-on:事件名="方法名" --><button v-on:click="alertWin">clickMe</button></div><script>//创建vue实例new Vue({el:'#app',//绑定容器data:{//数据arr1:[100,200,300],a:4,imgUrl:"../images/f1.jpg",t:"flower",modelData:"hello"},//methodsmethods:{alertWin:function(){alert("tttttt");}}});</script></body></html>

第三个计算属性的案例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>vuejs案例3</title><script src="../js/vue.js"></script></head><body><div id='app'><p>原始字符串： {{message}}</p><p>计算后反转字符串： {{reverseMessage}}</p></div><script>new Vue({el:'#app',data:{message: 'Runoob!'},computed: {reverseMessage: function(){return this.message.split('').reverse().join('')}}});</script></body></html>

阅读全文

0 0