Vue入门篇_1

来源：互联网发布：淘宝双11业绩查询编辑：程序博客网时间：2024/06/11 20:51
<!DOCTYPE html><html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8">    <title>Vue learing</title>    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>    <style>        .changeColor{            background: #444;            color: #eee;        }    </style></head><body><div id="app">    <p>{{ message }}</p>    <!-- 使用v-html指令生成html代码-->    <div v-html="code"></div>    <!-- 使用v-bind指令生成html代码  结合v-model使用  v-bind响应式更新html-->    <label for="r1">修改颜色</label>    <input type="checkbox" v-model="changeColor" id="r1"/>    <br><br>    <div v-bind:class="{'changeColor':changeColor}">        颜色已经改变... ... v-bind:class    </div>    <br><br>    <!-- 表达式 在html中可以直接写表达式 -->    {{ 5+5 }} <br>    {{ ok ? 'YES' : 'NO' }} <br>    {{ dataval.split('').reverse().join('') }}    <div v-bind:id="'list-'+id">菜鸟教程</div>    <br><br>    <!-- 使用v-前缀指令 v-if  设置元素是否插入到dom中 -->    <p v-if="pFlag">Now , you can see me</p>    <template v-if="descFlag">        <h1> This is the first line</h1>        <p> This is the second line</p>        <p> We learn for dream , instead of money</p>    </template>    <br><br>    <!-- 使用v-bind指令  响应更新html -->    <a v-bind:href="url">点击链接</a>    <br><br>    <!-- 使用v-on指令  监听dom事件-->    <!--<button v-on:click="clickBtn">按钮</button>-->    <!-- 指令缩写形式 -->    <button @click="clickBtn">按钮</button>    <br><br>    <!-- 使用v-model 实现双向数据绑定 个人理解：为dom元素初始化赋值，当改变dom元素的input值时，与之关联的元素也会更新-->    <template>        <input type="text" v-model="inputval"/>        <p>反转字符串：{{ reverseInputval }}</p>    </template>    <br><br>    <!-- 管道 -->    {{ dataReal | capitalize }}    <br><br>    <!-- 条件判断语句 v-if -->    <template>        <div v-if="type === 'A'">            Yeah , now you can see the A situation        </div>        <div v-else-if="type === 'B'">            And now you can see the B situation        </div>        <div v-else-if="type === 'C'">            situation : C        </div>        <div v-else="type === D">            all right  Not in A/B/C        </div>    </template>    <br><br>    <!-- 使用v-show指令 注意：v-show 不支持templete语法 -->    <div v-show="test">        obviously , it's about showing or not    </div>    <br><br>    <!-- 使用v-for指令循环array -->    <template>        <p>Here are some new thchnologies that you didn't konw before</p>        <ol>            <li v-for="data in list">                {{ data.name }} <small>{{ data.author }}</small>            </li>        </ol>    </template>    <br><br>    <!-- 使用v-for 循环 object 需要注意：循环键值对第一个表示value 第二个表示key 是反序的-->    <template>        <h3>Use v-for command for ergodic object</h3>        <ul>            <li v-for="(value,key,index) in obj">               {{index+1}} ： {{ key }} ：{{ value }}            </li>        </ul>    </template>    <br><br>    <!-- computed set & get-->    <p>{{ aUrl }}</p></div><script>  var vm = new Vue({    el: '#app',    <!-- 数据展现&处理-->    data: {      message: 'Hello Vue.js!',      code:'<h1>This is my first page!</h1>',      changeColor:false,      ok:false,      dataval:'数据展现... ...',      id:1,      pFlag:true,      descFlag:false,      url:'www.baidu.com',//      clickBtn:function () {//        console.log("you click me , so i'll response for you ");//      },      inputval:"show the inital value",      dataReal:'filter test ... ...',      type:'D',      test:true,      list:[        {name:'storm',author:'royarn1'},        {name:'spark',author:'royarn2'},        {name:'kafka',author:'royarn3'}        ],      obj:{        name:'royarn',        sex:'男',        blog:'http://write.blog.csdn.net/postlist'      }    },    <!-- 过滤器 -->    filters:{      capitalize:function (value) {        if(!value) return ''        value = value.toString()        return value.charAt(0).toUpperCase() + value.slice(1)      }    },    <!-- 事件处理-->    methods:{      clickBtn:function () {        console.log("you click me , so i'll response for you ");      }    },    <!-- 计算属性-->    <!--computed vs methods 使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，-->    <!--只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。-->    <!--使用 computed 性能会更好，但是如果不希望缓存，使用 methods 属性-->    computed:{      <!--计算属性的getter-->      reverseInputval:function () {        return this.inputval.split('').reverse().join('');      },      aUrl:{        <!-- get -->        get:function () {          return this.name + '，' +this.urlreal;        },        <!-- set -->        set:function (obj) {          var names = obj.split("：");          this.name = names[0];          this.urlreal = names[names.length-1];        }      }    }  });  vm.aUrl = "网址：www.baidu.com";  console.log(vm);  document.write("网站：" + vm.name);  document.write("<br><br>");  document.write("地址：" + vm.urlreal);</script></body></html>
阅读全文
0 0