VUE 初学笔记

最新推荐文章于 2024-11-06 11:13:52 发布

LiMay4

最新推荐文章于 2024-11-06 11:13:52 发布

阅读量265

点赞数

分类专栏：前端框架文章标签： vue.js javascript 前端 visual studio code

本文链接：https://blog.csdn.net/weixin_41560845/article/details/127075605

版权

前端框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

new vue({
   el:"#id",//挂载
   data:{
       msg:"<h1>数据内容</h1>"
   },
   template:"模板,页面内容部分",
})

html:
<div v-text="msg"></div> //<h1>数据内容</h1>
<div v-html="msg"></div> //数据内容

v-on:click="methodName"
==>等价于
@click="methodName"
new vue({
   el:"#id",//挂载
   methods:{
       methodName: function(){
           alert(11);
       }
})

v-blid:title="title2" 绑定属性
//title:属性
//title2:data:{ title2:"数据"}

<input :value="msg"/> //<h1>数据内容</h1> 单向数据绑定
<input v-model="msg"> //双向数据绑定 input变 msg变
new vue({
   el:"#id",//挂载
   computed:{//计算方法
       methodName: function(){
               return A+B;
           }
   }
   watch:{//侦听器
           methodName: function(){
               this.count ++
           }
   }
})

v-if 和 v-show 及 v-for指令
<div id="root">
           <div v-if="show">hello World!</div>   //点击事件-->删除div
           <div v-show="show">hello World!</div>   //点击事件-->隐藏div
           <button @click="hideClick">button</button>
           <ul>
               <li v-for="item in list">
                   {{item}}
               </li>

               
               <li v-for="(item,index) in list" :key="index">
                   {{item}}
               </li>
           </ul>
       </div>
new Vue({
           el:"#root",
           data:{
               show:true,
               list:[1,2,3]
           },
           methods:{
               hideClick: function(){
                   this.show = !this.show
               }
           }
       })


Modal 操作
取消和右上角 X @on-cancel
确定 @on-ok
自定义确认和取消
<div slot="footer">

常用校验
{required: true, message: '用户名不能为空'}

// 字符长度限制
{min: 2, max: 6, message: '长度为2-6个字符'}

// 类型
{type: 'number', message: '只能输入数字'}
{type: 'url', message: '路径格式不对'}
{type: 'email', message: '邮箱格式不对' }

// 长度限制 len
// 如果len 属性与最小和最大范围属性组合，则len优先。
{len: 4, message: '最大长度是4'}

import {isNullSpecialCharacters, isSpecialCharacters} from '@/libs/validator'
:required="true"
{validator: isNullSpecialCharacters, trigger: 'blur'}
{validator: isSpecialCharacters, trigger: 'blur'}

@on-cancel="modalCancel('formLeft')"
取消校验
@on-cancel="handleReset('formInline1')"

this.$refs[name].resetFields()

if (/[`@$^&*+=%'＼#<>]/.test(value)) {

@on-blur="check_count(drInfo.searchValue)"

check_count (value) {
if (/[`~!$%*^&()\-+=<>:"{}|,;'\\[\]·~！/￥……&（）——+{}|？?《》：“”【】、；‘’，。、.]/im.test(value)) {
alert('输入内容包含非法字符,请重新输入')
}
},

check_count (value) {
if (/[`@$^&*+=%'＼#<>]/.test(value)) {
alert('输入内容包含非法字符,请重新输入')
}
},

this.$refs[name].validate((valid) => {
if (valid) {

}else {
this.$Message.error('表单验证失败!')
}
})

<div slot="content">
{{messageInfo}}
</div>
<Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>  搜索</Button>