Vue2.5入门-1

淡淡的烟草味﹌ 2021-12-18 13:21 219阅读 0赞

###### vue如何引用和使用，实例和挂在点的介绍 ######

>     <!DOCTYPE html>
>     <html>
>     <head>
>       <title>vue 入门</title>
>       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
>     </head>
>     <body>
>       <div id="root">
>           // <h1>hellow {
>          {msg}}</h1> //方式一的模板
>       </div> //挂载点
>       <script>
>           new Vue({   //一个vue实例
>               el: "#root" , //绑定挂载点
>               template: '<h1>hellow {
>          {msg}}</h1>' //方式二的模板
>               data: { 
>                   msg: "hellow word"
>               }
>           })
>       </script>
>     </body>
>     </html>

###### 挂载点，模板和实例 ######

###### Vue实例中的数据，事件和方法 ######

> 插值表达式与v-text和v-html
> 
>     //插值表达式 {
>          {mgs}}
>     
>     //标签绑定内容 v-text和v-html
>     <body>
>       <div id="root">
>           {
>          {msg}}
>           <h1 v-text="number"></h1>
>           <h1 v-html="number"></h1>
>       </div>
>       <script>
>           new Vue({
>               el: "#root" ,//和哪一个dom节点绑定
>               data: {
>                   msg: "hellow word",
>                   number: '<span>123</span>'
>               }
>           })
>       </script>
>     </body>
>     
>     //v-text 输出 <span>123</span> 会转义
>     //v-html 输出 123 不会转义
> 
> 事件函数v-on ，注意v-on: = @
> 
>     <h1 v-text="number" @click="handleClick"></h1>
>     <h1 v-html="number" v-on:click="()=>{alert(123)}"></h1>
>     
>     methods:{
>      // handleClick: function(){
>      //   alert(321);
>      // }
>      handleClick: function(){
>          this.msg = "world";
>      }
>     }

###### Vue 中的属性绑定和双向数据绑定 ######

> 属性绑定v-bind，注意v-bind: = :
> 
>     <div id="root" v-bind:title="title">
>           {
>          {content}}
>     </div>
> 
> 双向数据绑定，v-model
> 
>     <div id="root" v-bind:title="title">
>      <input  v-model="content">
>      <div>{
>          {content}}</div>
>     </div>

###### Vue中的计算属性和侦听器 ######

> 计算属性，作用是将以前计算过的相同值做缓存，可以提高效率
> 
> 侦听器，监测某一个数据或计算属性发生变化
> 
>     <!DOCTYPE html>
>     <html>
>     <head>
>       <title>vue 入门</title>
>       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
>     </head>
>     <body>
>       <div id="root">
>           姓<input v-model="firstName"/>
>           名<input v-model="lastName"/>
>           <div>{
>          {fullName}}</div>
>           <div>{
>          {count}}</div>
>       </div>
>       <script>
>           new Vue({
>               el: "#root" ,//和哪一个dom节点绑定
>               data: {
>                   firstName: '',
>                   lastName: '',
>                   count: 0
>               },
>               computed: {//计算属性
>                   fullName: function(){
>                       return this.firstName + this.lastName;
>                   }
>               },
>               watch: { //侦听器
>                   // firstName: function(){
>                   //  return this.count++;
>                   // },
>                   // lastName: function(){
>                   //  return this.count++;
>                   // }
>                   fullName: function(){
>                       this.count++;
>                   }
>               }
>           })
>       </script>
>     </body>
>     </html>

###### v-if，v-show，v-for指令 ######

> v-if和v-show的区别，v-if会将元素从dom节点删除，但v-show不会
> 
> v-for中v-bind:key
> 
>     <div id="root">
>      <div v-show="isShow">hello word</div>
>       <button @click="isShow1">toggle</button>
>       <ul>
>           <li v-for="(item,index) of list" :key="index">{
>          {item}}</li>
>       </ul>
>     </div>
>     <script>
>       new Vue({
>       el: "#root" ,//和哪一个dom节点绑定
>          data: {
>           isShow: true,
>              list: [1,1,3]
>          },
>          methods: {
>              isShow1: function(){
>                   this.isShow = !this.isShow;
>              }
>          }
>      })
>     </script>

转载于:https://www.cnblogs.com/TomAndJerry/p/10611606.html