ASCII码 ASCII码

JS框架 -（二）vue基础

发布于：2022-04-28 11:16:32  栏目：技术文档

1. 实例演示vue常用术语,达到背诵级

vue安装

cdn方式<script src="https://unpkg.com/vue@next"></script>

  1.  <!-- 静态页面 -->
  2.     <h1>Hello World</h1>
  3.     <h1 class="title">
  4.       <!-- 插值 -->
  5.         <div>{{title}}</div>
  6.         <div>{{content}}</div>
  7.     </h1>
  8.       <!-- v-html,v-text: 内容填充 -->
  9.     <h1 class="content">
  10.         <div v-html="title"></div>
  11.         <div v-text="content"></div>
  12.     </h1>
  13.     <h1 class="">{{title}}</h1>
  14.     <script>
  15.       a = {
  16.         data() {
  17.           return {
  18.             email:'zl@qq.com',
  19.             title: '我是title占位符内容',
  20.             content: '我是content占位符内容',
  21.           };
  22.         },
  23.       };
  24.       //mount(".title")挂载点
  25.       //create vue实例
  26.       app = Vue.createApp(a).mount(".title");
  27.       console.log(app.content);
  28.       app.content = '响应式内容'
  29.       obj = {
  30.           data:{
  31.             email:'zl@qq.com'
  32.           },
  33.           get email(){
  34.               return this.data.email
  35.           }
  36.       }
  37.       console.log(obj.email);
  38.       b = {
  39.         data() {
  40.           return {
  41.             email:'zl@qq.com',
  42.             title: '<p style="color:red">我是title占位符内容</p>',
  43.             content: '我是content占位符内容',
  44.           };
  45.         },
  46.       };
  47.       app2 = Vue.createApp(b).mount(".content");
  48.     </script>

2. 实例演示样式与事件绑定

  1. <style>
  2.     .active{
  3.         color: royalblue;
  4.     }
  5. </style>
  6. <body>
  7.     <!-- 样式绑定 -->
  8.     <div class="app">
  9.         <p style="color: red;">hello</p>
  10.         <p v-bind:style ='style'>hello</p>
  11.         <!-- v-bind => 省略 -->
  12.         <p :style ='style'>hello</p>
  13.         <p :style ='{color,background:bgcolor}'>hello</p>
  14.         <p class="active">hello</p>
  15.         <!-- v-bind:class -->
  16.         <p :class="act">hello</p>
  17.     </div>
  18.     <script>
  19.         app = {
  20.             data(){
  21.                 return{
  22.                     style:'color:green',
  23.                     color:'green',
  24.                     bgcolor:'yellow',
  25.                     act:'active'
  26.                 }
  27.             }
  28.         }
  29.         Vue.createApp(app).mount('.app')
  30.     </script>

  1. 原生<input type="text" oninput="document.querySelector('.res').textContent=this.value"/>
  2.     <div class="res"></div>
  3.     <div class="app">
  4.         <!-- v-on:  =>  @ -->
  5.         <!-- event  => $event -->
  6.      oninput<input type="text" v-on:input="value = $event.target.value"><br/>
  7.      @oninput<input type="text" @input="value = $event.target.value">
  8.      <p>{{value}}</p>
  9.      v-model<input type="text" v-model='mvalue'>
  10.      <p>{{mvalue}}</p>
  11.      lazy<input type="text" v-model.lazy='zvalue'>
  12.      <p>{{zvalue}}</p>
  13.     </div>
  14.     <script>
  15.         app = {
  16.             data(){
  17.                 return{
  18.                     value:'',
  19.                     mvalue:'',
  20.                     zvalue:''
  21.                 }
  22.             }
  23.         }
  24.         Vue.createApp(app).mount('.app')
  25. </script>
  26. //分隔符-------------------------分隔符
  27.     <!-- v-on: => @
  28.     event => $event -->
  29.     <div class="app">
  30.     <a href="http://www.baidu.com" @click="show($event)">显示网站内容</a>
  31.     <hr>
  32.     <p onclick="alert('father')">
  33.         <a href="http://www.baidu.com" @click.prevent.stop="s($event)">显示网站内容</a>
  34.     </p>
  35.     <div class="url">{{url}}</div>
  36. </div>
  37. <script>
  38.     app = {
  39.         data(){
  40.             return{
  41.                 url:''
  42.             }
  43.         },
  44.         methods:{
  45.             show(eve){
  46.                 eve.preventDefault()
  47.                 this.url = eve.target.href;
  48.             },
  49.             s(eve){
  50.                 this.url = eve.target.href;
  51.             }
  52.         }
  53.     }
  54.     Vue.createApp(app).mount('.app')
  55. </script>

3. 实例演示列表渲染,并理解:key

  1. <body>
  2.     <div class="app">
  3.         <p>{{citys}}</p>
  4.         <ul>
  5.             <li v-for='(item,index) of citys' :key='index'>{{index}}=>{{item}}</li>
  6.             <li v-for='(oitem,oindex) of obj' :key='oindex'>{{oindex}}=>{{oitem}}</li>
  7.         </ul>
  8.     </div>
  9. </body>
  10. <script>
  11.     app = {
  12.         data(){
  13.             return{
  14.                 citys:["上海","北京","武汉","长沙"],
  15.                 obj:{
  16.                     username:'zolo',
  17.                     email:'zl@qq.com'
  18.                 }
  19.             }
  20.         }
  21.     }
  22.     Vue.createApp(app).mount('.app')
  23. </script>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行