4004—Vue 2.x随笔

zhang_yling

已于 2023-10-22 09:33:50 修改

阅读量330

点赞数

分类专栏：前端 Vue 文章标签： vue

于 2020-12-15 15:19:16 首次发布

本文链接：https://blog.csdn.net/zhang_yling/article/details/111216030

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

一、安装

1—cdn方式

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

2—脚手架下载

npm install -g webpack

npm install -g webpack-cli

npm install -g vue

npm install -g vue-cli

# 新建一个项目
vue init webpack <名称>

# 安装项目依赖
# cd <项目目录>
npm install

3—配置参数

-- 查看配置
npm config list

二、作用范围

<body>
		<div id="app">
			<select v-model="checked" name="fruit">
				<option value="">选择一艘战舰</option>
			    <option value="nagato">长门号</option>
		    	<option value="fuso">扶桑号</option>
                <option value="yamato">大和号</option>                
			</select>            
            <br/>
            <h3>{{checked}}</h3>            	
 		</div>
        <div id="output">
		    	  选择的战舰是:{{checked}}
        </div>
</body>
<script type="text/javascript">			
		 new Vue({
			  el: '#app',
			  data: {	checked: 'fuso'  }
		})
</script>

当在Vue定义的el标志的div外引用值时（data），将无法使用。

三、语法

1—模拟字符串

beforeRemove: function(file,fileList) {
     console.log(file);
     return this.$confirm(`确定移除${file.name}吗？`);
}

字符串需要使用【·】tab键上面那个键括起来，而不能使用单/双引号。

2—v-model

只能用在表单类元素，数据可在页面元素和data域双向流动
v-model:values可简写为v-model，因为v-model就是绑定value

3—v-bind

v-bind:values可简写为:value
数据从data到页面元素单向流动

4—el挂载点

//下面2句是等价的
const v=new Vue({
    el: '#root'
});

v.$mount('#root');

5—object.defineproperty

console.log("container()------------>>建立")
        let person={
                name: '法外狂徒',
                sex: '男'
        }
        console.log(person);
        Object.defineProperty(person,'age',{
            value: 23
        })
        console.log(person);
//object.defineproperty方法新增的属性，不能通过枚举方式进行显示object.keys

效果如下

6—object.keys

遍历对象的全部key

let person={
    name: '法外狂徒',
    gender: '男',
    age : 23
}        

console.log(object.keys(person));

7—对象遍历

let person={
    name: '法外狂徒',
    gender: '男',
    age: 23
}

for(let key in person){
   console.log(person[key]);
}

效果如下：

8—类和对象

//语法：函数内声明。未加入构造器语句
class myErr{  undefined
    Forder;
    Fcontent;
}

//使用
var newOne=new myErr();

9—队列操作，并触发双向绑定

//加入到队列 
this.gridData.push(newOne );

//删除并返回数组的最后一个元素
this.gridData.pop();

//第一个元素从其中删除，并返回第一个元素的值
this.gridData.shift();

//数组的开头添加一个或更多元素，并返回新的队列 
this.gridData.unshift(newOne,newTwo);

10—基本语法

//data为集合 
data.forEach(function(item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引，从0开始
})

四、事件

1—事件参数

//不带参
<el-button @click="showmsg">点我</el-button>
//带参
<el-button @click="showInfo(22)">点我</el-button>

<el-button @click="showex($event,22)">点我</el-button>

<script>
const vm=new Vue({
    el: '#app',
    data: function() {
       return {


        }    
    },
    methods: {
      showInfo: function(number) {
         console.log(number);
      },
      showex: function(event,number){
        //输出事件
        console.log(event);
        //打印主要信息
        console.log(event.target);
      }
        
    }


})

</script>

2—事件修饰符

//下面2句是等价的
<a href="www.baidu.com" @click="showInfo()" >事件</a>

<a href="www.baidu.com" @click.prevent="showInfo()">事件2</a>

<script>
    methods: {
        showInfo: function(e) {
            e.preventdefault();
        }
    }
</script>

prevent 阻止事件默认行为（常用）
stop 阻止事件冒泡（常用）
once 事件只触发一次
capture 使用事件的捕获模式
self 只有event.target是当前操作的元素
passive 事件默认行为为立即执行，无需等待

3—事件阶段

分为捕获阶段和冒泡阶段。

捕获阶段。从外层向内层递进。
冒泡阶段。从内层向外层递进。在捕获阶段后执行。

4—键盘事件

enter
delete 捕获delete和backspace
esc
space
tab
up 捕获方向键
down
left
right

<!--    键盘事件包含：@keyup、@keydown、、 -->
<!--    回车触发  -->
<input type="text" @keyup.enter="showInfo" />

<!--    大小写切换键  -->
<!--    CapsLock键使用capslock或CapsLock都不正确   -->
<input type="text" @keyup.caps-lock="showInfo" />

<!--    支持连缀  -->
<a href="www.baidu.com" @keyup.stop.prevent="showInfo" />

Vue未提供别名的按键，可以使用按键原始的key值进行绑定，但注意要转为kebab-case（短横线命名）。

系统修饰符（用法特殊）：ctrl、alt、shift、meta。

配合keyup使用。
配合keydown使用，正常触发事件。

Vue.config.keycodes.自定义键名=键码，可以去定制按键别名

5—回调父组件事件

父组件的代码

<template>

    <moduleName ref="<refName>" @getChildren="handleCallBack($event)"></moduleName>
</template>

<script>
export default{
  data:function(){
    return{

    }
  },
  methods:{
    handleCallBack(data) {
      // process logical codes
      
    }
  }

}
</script>

子组件的代码

<template>
    <el-dialog
         :before-close="handleCallBack">        

</template>

<script>
export default{
  data:function(){
    return{
    
    }
  },
  methods:{
    handleCallBack() {    //返回数据到主调页面
      this.$emit('getChildren',this.gridData);
      this.myVisible=false;
    }

  }
}  
</script>

五、计算属性

1—简写

const VM=new Vue({
    el:"#myapp",
    data: {
      firstName: '张',
      lastName: '三'            
    },
    computed: {
        //完整写法
        fullName: {
           get(){
             return this.firstName+this.lastName

           },
           set(value){
              const vals=value.split('-');  
              this.firstName=vals[0];
              this.lastName=vals[1]    
            }
        }
        //简写
        fullName(){
           //不包含set功能
           return this.fistName+this.LastName; 
        }    

    }

})

六、绑定样式

1—绑定class

语法格式： :class="xxx" xxx可以为字符串、对象、数组

2—绑定style

格式1： :style="{fontsize='xx'}" 其中xx为动态值

格式2： :style="[a,b]" a和b为样式对象。

/*   样式对象 例子   */
aObj {
  fontSize : '24px',
  color: 'red'
}

七、页面元素

1—form

<template>
    <el-form ref="refForm" :model="formIn">
       <el-form-item prop="name" >
           <el-input type="text" v-model="formIn.name" />
       </el-form-item> 
    </el-form>
</template>


<script>
export default{
  data:function(){
    return{

    }
  },
  methods:{
    handleReset(){  //清空form表单数据
      this.$refs.refForm.resetFields()
      //另一种方法
      this.$options.data() // 整个data全部重置（这是vue实例初始化时的data值，只读）
      this.form = this.$options.data().form // 重置data中的 某个form表单
    }     

  }

}
</script>

十、疑问杂症

1—form input元素无法输入

 <el-input v-model="drawingData.FBlueprintNo"  />

经查，为data部分出错，原代码如下：

drawingData:{}

//修正后代码如下：
drawingData:{FBlueprintNo:'' }

zhang_yling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
4004—Vue 2.x随笔

1、作用范围 <body> <div id="app"> <select v-model="checked" name="fruit"> <option value="">选择一艘战舰</option> <option value="nagato">长门号</option> <option value="fuso">扶桑号</option&g...
复制链接

扫一扫