Vue学习-入门-CSDN博客

本文链接：https://blog.csdn.net/qq_64891979/article/details/124115284

前言：Vue是一款前端渐进式框架，可以提高前端开发效率。

特点：

Vue通过MVVM模式,能够实现视图与模型的双向绑定。简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化。MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。

引入Vue.js maven方式：

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

或者：点击去Vue.js (vuejs.org)https://cn.vuejs.org/

Vue的基本参数：
el：元素的挂载位置值可以dom元素
data：是数据
模板语法
差值表达式：
指令：就是命令，自定义属性，指令格式以v-开始，如v-cloak
v-text：填充纯文本比差值表达式更加简洁
v-html：存在安全问题.可编译标签,不能在第三方上使用
v-pre：显示原始信息，不经过编译，让vue语法失效，写法与v-cloak一致
v-once：只进行一次编译，不会随着数据的变化页面也随之变化
数据响应式：数据的变化页面也随之变化，用vm做为vue对象名
v-model：双向的数据绑定，数据的变化页面也随之变化
m v vm设计思想
在页面修改数据是view在向model传数据
在控制器修改数据是model在向view传数据
事件绑定：
v-on==@
this. ：当前的vue对象
接收参数用 p 最后一个参数永远是$event
v-on：click.stop:阻止向上冒泡，阻止事件冒泡，如果有嵌套，只执行本身事件
v-on：click.prevent:阻止本身默认行为
按键修饰符：
.enter回车键
.esc退出键
.delete删除键
自定义按键：
Vuc.config.keyCode.f1=65
属性绑定
<a V-bind:href='url'>==<a :href='url'>
样式绑定

实操：

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
	</head>
	<body>
	<div id="app">
      <div v-cloak>{{ msg }}</div>
      <div v-text="msg+1"></div>
      <div v-html="msg1"></div>
      <div v-pre>{{ msg }}</div>
      <div v-once>{{ msg }}</div>
      <div>{{ msg1 }}</div>
      <input type="test" v-model="msg1"/>
      <div>{{ num }}</div>
      <button v-on:click="num++">点击</button>
      <button @click="num++">点击1</button>
      <button @click="handle">点击2</button>
      <button @click="handle('123','456',$event)">点击3</button>
      <div v-on:click="handle1">
          <button v-on:click.stop="handle2">点我4</button>
      </div>
      <a href="http://www.baidu.com" v-on:click.prevent="handle3">百度</a>
      <div>
          <input type="text" v-model="username" v-on:keyup.enter="handle3">{{ username }}
          <input type="text" v-model="pass" v-on:keyup.delete="handle4">
          <input type="text" v-model="pass" v-on:keyup.f1="handle5">
      </div>
      <div>
          <a v-bind:href="test">去百度</a>
          <a :href="test">去百度</a>
      </div>

      <div>
          <input type="text" v-bind::value="info" v-on:input="handle7">{{ info }}
      </div>
    </div>

	</body>
    <script type="text/javascript">
        Vue.config.keyCodes.f1 = 65
         var vm=new Vue({
             el:"#app",
             data:{
              msg:"hello,world",
              msg1:"<h1>hello,vue</h1>",
              num:0,
              username:"hi",
              pass:"123",
              test:"http://www.baidu.com",
              info:"",
             },
             methods: {
                 handle:function(p,p1,event){
                     console.log(this==vm);
                     console.log(p,p1);
                     console.log(event.target.innerHTML);
                     this.num++;
                 },
                 handle1:function(){
                     this.num++;
                 },
                 handle2:function(){

                 },
                 handle3:function(){
                     console.log(this.username)
                 },
                 handle4:function(){
                    this.pass="";
                 },
                 handle5:function(event){
                    console.log(event.keyCode)
                 },
                 handle7:function(event){
                    this.info=event.target.value;
                 }
             },
         })
    </script>
</html>

对象语法
isactive
inerror
数组语法
activeClass
erriveClass
style样式
对象语法

实操：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<style type="text/css">
.active{
    border: 1px solid aqua;
    width: 200px;
    height: 200px;
}
.error{
    background-color: rebeccapurple;
}
</style>
<body>
<div id="app">
    <!--针对的是class样式-->
    <!--对象语法-->
    <div v-bind:class="{active:isactive,error:iserror}">
      111
    </div>
     <button v-on:click="handle">切换</button>
     <!--数组语法-->
    <div v-bind:class="[activeClass,errorClass]">
      222
    </div>
    <button v-on:click="handle1">切换</button>

    <!--针对的是style样式-->
    <!--对象语法-->
    <div v-bind:style="{color:'yellow',border:'2px solid aqua',width:'200px',height:'200px'}">
      333
    </div>
      <button v-on:click="handle2">切换</button>
       <!--数组语法-->
    <div v-bind:style="[widthstyle,heightstyle]">
        444
      </div>
      <button v-on:click="handle3">切换</button>
</div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                isactive:true,
                iserror:true,
                activeClass:"active",
                errorClass:"error",
                widthstyle:{
                    width:"300px",
                    border:"2px solid yellow ",
                    background:"red"
                },
                heightstyle:{
                    height:"300px"
                }
            },
            methods: {
                handle:function(){
                    this.isactive=!this.isactive;
                    this.iserror=!this.iserror;
                },
                handle1:function(){
                    this.activeClass="";
                    this.errorClass=""
                },
                handle2:function(){

                },
                handle3:function(){
                    this.heightstyle.height="100px";
                }
            }
        })
    </script>
</body>
</html>

分支循环结构
v-if
v-else
v-else-if
v-show
v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到页面了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="score>=90">优秀</div>
    <div v-if="score<90&&score>=80">中等</div>
    <div v-if="score<80&&score>=60">一般</div>
    <div v-if="score<60">不及格</div>
    <div v-show="flag">测试</div>
    <button v-on:click="handle">显示成绩</button>

    <ul>
        <li v-for="item in fruit">{{ item }}</li>
        <li v-for="(item, index) in fruit">{{ item+"---"+index }}</li>

        <li :key="item.id" v-for="(item, index) in myfruit">
            <span>{{item.ename}}</span>
            <span>{{item.cname}}</span>
            <span>{{item.id}}</span>
        </li>
        <li v-for="(v,k,i) in obj">{{v+"---"+k+"---"+i}}</li>
    </ul>
</div>

    <script type="text/javascript">
       new Vue({
            el:"#app",
            data:{
                score:59,
                flag:false,
                fruit:["apple","banana","orange"],
                myfruit:[{
                    id:1,
                    ename:"apple",
                    cname:"苹果"
                },{
                    id:2,
                    ename:"banana",
                    cname:"香蕉"
                },{
                    id:3,
                    ename:"orange",
                    cname:"橘子"
                }],
                obj:{
                    name:"王五",
                    age:20,
                    sex:"男"
                }
            },
            methods: {
                handle:function(){
                  this.flag=!this.flag
                }
            }
        })
    </script>
</body>
</html>

vue常用特性
表单操作
number：转化为数值
trim：去掉开始与结尾的空格
lazy：将input事件转化为change事件