vue基础(一)

已于 2022-08-15 00:04:59 修改
阅读量745 收藏
点赞数
分类专栏： vue 文章标签： 前端 vue.js vue
于 2022-08-10 18:42:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51688301/article/details/126267998
版权

v-on指令的作用是绑定事件,简写为@

方法中通过this,关键字获取data中的数据

v-text指令的作用是:设置元素的文本值,简写为{{}}

v-html指令的作用是:设置元素的innerHTML

v-show指令根据表达值的真假，切换元素的显示和隐藏（频繁使用推荐v-show）

v-if: 根据表达式的真假切换元素的显示状态（与v-show同作用）

v-bind：设置元素的属性（比如src,title,class）

v-for:根据数列生成列表结构

 v-model:获取和设置表单元素的值（双向数据绑定）

目录

一、vue2基础

MVVM模型

Vue模板语法有2大类：

data与el的2种写法

 v-on指令的作用是绑定事件,简写为@

v-text指令的作用是:设置元素的文本值,简写为{{}}

v-html指令的作用是:设置元素的innerHTML

 v-show指令根据表达值的真假，切换元素的显示和隐藏

v-if: 根据表达式的真假切换元素的显示状态（与v-show同作用）

 v-bind：设置元素的属性（比如src,title,class）

 图片切换案例

 v-for:根据数列生成列表结构

 v-model:获取和设置表单元素的值（双向数据绑定）

二、vue-demo

记事本

 记事本--总结

一、vue2基础

MVVM模型

                        1. M：模型(Model) ：data中的数据

                        2. V：视图(View) ：模板代码

                        3. VM：视图模型(ViewModel)：Vue实例       

Vue模板语法有2大类：

                    1.插值语法：

                            功能：用于解析标签体内容。

                            写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

                    2.指令语法：

                            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

                            举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，

                                     且可以直接读取到data中的所有属性。

data与el的2种写法

                    1.el有2种写法

                                    (1).new Vue时候配置el属性。

                                    (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

                    2.data有2种写法

                                    (1).对象式

                                    (2).函数式

                                    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

                    3.一个重要的原则：

                                    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:'尚硅谷'
			} */

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})
  • 创建Vue实例时:el(挂载点),data(数据),methods(方法)
  • 一个容器只能对应一个vue实例，一个vue实例也只能对应一个容器

  •  v-on指令的作用是绑定事件,简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

事件绑定的方法写成函数调用的形式，可以传入自定义参数

 定义方法时需要定义形参来接收传入的实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

//容器
<div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
        <h2 @click="changeFood">{{  food    }}</h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
            //vue实例
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花"
            },
            methods: {
                doIt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃了没");
                },
                changeFood(){
                    //console.log(this.food);
                    this.food+="好好吃！"
                }
            },
        })
    </script>
  • 方法中通过this,关键字获取data中的数据

  • v-text指令的作用是:设置元素的文本值,简写为{{}}

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式

  • v-html指令的作用是:设置元素的innerHTML

 内容中有html结构会被解析为标签

 v-text指令无论内容是什么,只会解析为文本

 解析文本使用v-text,需要解析html结构使用v-html

 <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"<a href='http://www.itheima.com'>黑马程序员</a>"
            }
        })
    </script>

计数器实例 

  <body>
    <div id="app">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="sub">
          -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
          +
        </button>
      </div>
      <img
      src="http://www.itheima.com/images/logo.png"
      alt=""
    />
    </div>
  </body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1,
      min: 0,
      max: 10
    },
    methods: {
      sub() {
        if (this.num > this.min) {
          this.num--;
        } else {
          alert("别点啦,到底啦");
        }
      },
      add() {
        if (this.num < this.max) {
          this.num++;
        } else {
          alert("别点啦,到头啦");
        }
      }
    }
  });
</script>

  •  v-show指令根据表达值的真假，切换元素的显示和隐藏

  <body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="累加年龄" @click="addAge">
      <img v-show="isShow" src="./img/monkey.gif" alt="">
      <img v-show="age>=18" src="./img/monkey.gif" alt="">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
        methods: {
          changeIsShow:function(){
            this.isShow = !this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        },
      })
    </script>
  </body>

  • v-if: 根据表达式的真假切换元素的显示状态（与v-show同作用）

本质是通过操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中，为false，从dom树中移除

频繁的切换v-show，反之使用v-if,前者的切换消耗小

<div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">黑马程序员</p>
        <p v-show="isShow">黑马程序员 - v-show修饰</p>
        <h2 v-if="temperature>=35">热死啦</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20
            },
            methods: {
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>

  •  v-bind：设置元素的属性（比如src,title,class）

该指令的作用是：为元素绑定属性

完整写法是v-bind:属性名

简写可以直接省略v-bind，只保留  :属性名

需要动态的增删class建议使用对象的方式

语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页面 
<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>


	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
 <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

  •  图片切换案例

列表数据使用数组保存

v-bind指令可以设置元素属性,比如src

v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

    <div id="mask">
      <div class="center">
        <h2 class="title"><img src="./images/logo.png" alt=""> 深圳创维校区环境</h2>
        <img :src="imgList[index]" alt="" />
        <a
          href="javascript:void(0)"
          @click="prev"
          class="left"
          v-show="index>0"
        >
          <img src="./images/prev.png" alt="" />
        </a>
        <a
          href="javascript:void(0)"
          @click="next"
          class="right"
          v-show="index<imgList.length-1"
        >
          <img src="./images/next.png" alt="" />
        </a>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
    <script>
      const app = new Vue({
        el: "#mask",
        data: {
          imgList: [
            "./images/00.jpg",
            "./images/01.jpg",
            "./images/02.jpg",
            "./images/03.jpg",
            "./images/04.jpg",
            "./images/05.jpg",
            "./images/06.jpg",
            "./images/07.jpg",
            "./images/08.jpg",
            "./images/09.jpg",
            "./images/10.jpg",
          ],
          index: 0
        },
        methods: {
          // 上一张
          prev() {
            this.index--;
          },
          // 下一张
          next() {
            this.index++;
          }
        }
      });
    </script>

  •  v-for:根据数列生成列表结构

数组经常和v-for结合使用

语法是( item,index ) in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

 <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{ index+1 }}黑马程序员校区:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetables:[
                    {name:"西兰花炒蛋"},
                    {name:"蛋炒西蓝花"}
                ]
            },
            methods: {
                add:function(){
                    this.vegetables.push({ name:"花菜炒蛋" });  //增加数据
                },
                remove:function(){
                    this.vegetables.shift();  //移除数据
                }
            },
        })
    </script>

  •  v-model:获取和设置表单元素的值（双向数据绑定）

绑定的数据会和表单元素值相关联

绑定的数据←→表单元素的值

v-model只能应用在表单类元素（输入类元素（有value值））上

<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="酷丁鱼";
                }
            },
        })
    </script>

Vue中有2种数据绑定的方式：

                    1.单向绑定(v-bind)：数据只能从data流向页面。

                    2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

                        备注：

                                1.双向绑定一般都应用在表单类元素上（如：input、select等）

                                2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

二、vue-demo

  • 记事本

  • 添加
  1. 生成列表结构（v-for数组）
  2. 获取用户输入（v-model）
  3. 回车，新增数据（v-on .enter添加数据 ）
  4. push方法  

     add:function(){

              this.list.push(this.value);//往list数组中添加数据

            },

<!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>    //keyup.enter事件为回车触发add
      <input v-model="value"  @keyup.enter="add" autofocus="autofocus"  autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{{ index+1  }}.</span>
            <label>{{  item  }}</label>
            <button class="destroy" ></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count">
        <strong>1</strong> items left
      </span>
      <button class="clear-completed">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var todoapp=new Vue({
      el:"#todoapp",
      data:{
        list:["写代码","高数","c语言"],
        value:"好好学习"
      },
      methods:{
        add:function(){
          this.list.push(this.value);//往list数组中添加数据
        }

      },
    })
  </script>

  •  删除
  1. 点击删除指定内容（v-on  splice）
  2. splice方法的作用 

    remove:function(index){

              this.list.splice(index,1);//删除list数组中第index个数，删一个

            }

  •  统计
  1. 统计信息个数（v-text length）

<span class="todo-count">

        <strong>{{  list.length }}</strong> items left

 </span>

  • 清空
  1.  点击清楚所以信息（v-on 清空数组）

clear:function(){

          this.list=[];

        }

  • 隐藏
  1.  没有数据时，隐藏元素（v-show v-if 数组非空）
 <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>   <!-- keyup.enter事件为回车触发add--> 
      <input v-model="value"  @keyup.enter="add" autofocus="autofocus"  autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{{ index+1  }}.</span>
            <label>{{  item  }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count" v-if="list.length!=0"> 
        <strong>{{  list.length }}</strong> items left
      </span>
      <button v-show="list.length!=0" class="clear-completed" @click="clear" >
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var todoapp=new Vue({
      el:"#todoapp",
      data:{
        list:["写代码","高数","c语言"],
        value:"好好学习"
      },
      methods:{
        add:function(){
          this.list.push(this.value);//往list数组中添加数据
        },
        remove:function(index){
          this.list.splice(index,1);//删除list数组中第index个数，删一个
        },
        clear:function(){
          this.list=[];
        }

      },
    })
  </script>

  •  记事本--总结

  1. 列表结构可以通过v-for指令结合数据生成
  2. v-on结合事件修饰符可以对事件进行限制，比如.enter
  3. v-on在绑定事件时可以传递自定义参数
  4. v-model可以快速的设置和获取表单元素的值
  5. 基于数据的开发方式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值