Vue常用术语，样式绑定与事件绑定，列表渲染

发布于：2022-04-16 14:08:52  栏目：技术文档

Vue常用术语

调用vue时要导入vue@next
<script src="https://unpkg.com/vue@next"></script>
常用术语：挂载点，VUE实例，数据注入，响应式
1.挂载点：当前vue实例的作用域
<div class="app">
<p>用户名：{{message}}</p>    //{{message}}：就是挂载点
</div>
2.vue实例：
<script>
//实例:
const app = Vue.create({
     data(){
       return{
         message:"新手1314",
       };
     },
}).mount(".app");
//输出结果为：用户名：新手1314
//3.数据注入:
console.log(app.$data.message);//缩减前
console.log(app.message);//缩减后
//输出结果为：新手1314
//4.响应式：
app.message = "新手1314@php.cn";
//输出结果为：用户名：新手1314@php.cn
</script>

样式绑定

<style>
.active{
color:cyan;
}
</style>
<div class="app">
//对照组
<h1 style="color:red">Hello World</h1>
//样式绑定组，使用v-bind:绑定样式
<h1 v-bind:style="style">Hello 新手1314</h1>
//缩写组
<h1 :style="color:mycolor;background:mybackground">Hello php</h1>
//类样式
<h1 :class="active">Hello Vue.js</h1>
</div>
<script>
const app = Vue.createApp({
  data(){
     return{
        style:"color:red",   //输出结果：Hello 新手1314 字体变红色
        mycolor:"blue",      //输出结果:Hello php 字体变为蓝色
        mybackground:"yellow", //输出结果：Hello php 背景变为黄色
        active:"active",     //输出结果：将Hello Vue.js 字体变为浅蓝色
     };
  },
}).mount(".app");
</script>

事件绑定

//@是v-on的缩写，:是v-biod的缩写
<div class="app">
<a href="https://www.php.cn" @click="show($event)">显示地址：</a>
<span class="url">{{url}}</span>
</div>
<script>
const app = Vue.createApp({
  data(){
     return{
        url:null,
     };
  },
  methods:{
    show(show){
       show.preventDefault();   //阻止a标签的转跳
      this.url = show.target.href;
    }
  }
}).mount(".app");
</script>

列表渲染

<div class="app">
<ul>
   <li v-for="(game,index) of game" :key="index">{{key}} => {{game}}</li>
</ul>
</div>
<script>
  const app = Vue.createApp({
    data(){
      reutnr{
        game: ["王者荣耀","源神","三国杀"],
      };
    },
  }).mount(".app");
</script>
//输出结果为：0 => 王者荣耀
           1 => 源神
           2 => 三国杀
//无：key属性时，状态默认绑定的是位置；有：key属性时，状态根据key的属性值绑定到了相应的数组元素

相关推荐