vue js学习

最新推荐文章于 2023-12-21 14:34:21 发布

gao1017

最新推荐文章于 2023-12-21 14:34:21 发布

阅读量106

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/gao1017/article/details/118359253

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

构建项目
安装node.js
安装cnpm
安装vue-cli 脚手架构建工具（也可以直接使用命令不许安装cli）
构建项目命令
vue init webpack 项目名
注：若提示webpack不是内容不命令，需要先安装下webpack 命令： npm install webpack -g
声明式编程

const 常量
let 变量
hide:true 隐藏展示字段
addDisplay:false 隐藏from表单字段
search:true 搜索字段
searchLabelWidth:90, 搜索label宽度
dicUrl: ``, 下拉选远程数据
cascaderItem：[] 关联字段
editDisplay: false, from表单隐藏字段
editDisabled: true, from表单不可编辑
dicData：[] 静态字典select下拉选
valueFormat: “yyyy-MM-dd HH:mm:ss” 获取到的日期字符串格式
实体类处理@JsonFormat(pattern = “yyyy-MM-dd HH:mm:ss”,timezone = “GMT+8”)
属性 methods：方法
data：数据
el：
computed：计算属性不需要加() 若是在methods中写方法侧需要{{fullName()}}这么写
只会调用一次，若是函数会调用多次会浪费时间

<script src="../js/vue.js"></script>
<div id="app">
    <h2 style="text-align: center">{{ message }}</h2>
    <h3>{{fullName}}</h3>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
            name1: 'gwh',
          name2: 'nihao'
        },
      computed: {
        fullName: function(){
          return this.name1+"--"+this.name2;
        }
      }
    })
</script>

指令 v-pre

{{}}

数据不进行展示直接展示 {{}}
v-once 只渲染一次

v-bind 动态绑定 class可以为对象 true与false来决定是否生效

hello

对象语法或者

hello

getclass: function(){return{blue:isblue,size:issize} } 效果一样 v-html

url=" baidu " 解析为html baidu 为超链接 v-cloak 斗篷 v-on事件比如v-on:click v-on:keyup v-on 修饰符 1、.stop 防止冒泡事件：点击按钮div事件也触发

<script src="../js/vue.js"></script>
<div id="app">
    <h2 style="text-align: center">{{ message }}</h2>
  <div v-on:click="divClick">
    divviviviv
    <button @click.stop="btnClick">+</button>
  </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'v-on修饰符'
        },
      methods: {
        divClick(){
          console.log('divClick')
        },
        btnClick(){
          console.log('btnClick')
        }
      }
    })
</script>

2、.prevent 拦截默认事件比如 from 提交事件

<script src="../js/vue.js"></script>
<div id="app">
    <h2 style="text-align: center">{{ message }}</h2>
  <div v-on:click="divClick">
    divviviviv
    <button @click.stop="btnClick">+</button>
  </div>
  <form action="url">
    <input type="submit" @click.prevent="submit">
  </form>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'v-on修饰符'
        },
      methods: {
        divClick(){
          console.log('divClick')
        },
        btnClick(){
          console.log('btnClick')
        },
        submit(){
          console.log('submit')
        }
      }
    })
</script>

3、.once 只监听一次

<script src="../js/vue.js"></script>
<div id="app">
    <h2 style="text-align: center">{{ message }}</h2>
  <div v-on:click="divClick">
    divviviviv
    <button @click.stop="btnClick">+</button>
  </div>
  <form action="url">
    <input type="submit" @click.prevent="submit">
  </form>
  <input type="button" @click.once="onceClick" value="once">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'v-on修饰符'
        },
      methods: {
        divClick(){
          console.log('divClick')
        },
        btnClick(){
          console.log('btnClick')
        },
        submit(){
          console.log('submit')
        },
        onceClick(){
          console.log('onceClick');
        }
      }
    })
</script>

4、.监听键盘按键 v-on:keyup.enter=“enter” 监听按下回车键

<script src="../js/vue.js"></script>
<div id="app">
    <h2 style="text-align: center">{{ message }}</h2>
  <div v-on:click="divClick">
    divviviviv
    <button @click.stop="btnClick">+</button>
  </div>
  <form action="url">
    <input type="submit" @click.prevent="submit">
  </form>
  <input type="button" @click.once="onceClick" value="once">
  <hr>
  <input type="text" value="enter" @keyup.enter="enterClick">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'v-on修饰符'
        },
      methods: {
        divClick(){
          console.log('divClick')
        },
        btnClick(){
          console.log('btnClick')
        },
        submit(){
          console.log('submit')
        },
        onceClick(){
          console.log('onceClick');
        },
        enterClick(){
          console.log('enterClick');
        }
      }
    })
</script>

vue会存在一个虚拟dom若是相同的dom不会创建新的dom会互用
在这里插入图片描述

在这里插入图片描述
v-show:展示当为false时在页面不展示本质上在页面上display：none 若v-if=“false” 组件直接去掉
v-for

<script src="../js/vue.js"></script>
<div id="app">
    <h2 style="text-align: center">{{ message }}</h2>
  <ul>
    <li v-for="movie in movies">{{movie}}</li>
  </ul>
  <hr>
  <!-- 对象取值（值，下标） -->
  <ul>
    <li v-for="(movie,index) in movies">{{index+1+'.'+movie}}</li>
  </ul>
  <!-- 对象取值（值，键，下标） -->
  <ul>
    <li v-for="(value,key,index) in video">{{index+1+'.'+key+':'+value}}</li>
  </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'v-for 练习',
          movies: ['变形金刚','骷髅岛','异形'],
          video: {
              name:'骷髅岛',
            time:'2021',
            role:'6'
          }
        }
    })
</script>

注意：this.movies[0] = ‘复联’ 不是响应式的在时间函数中改变页面并不会渲染这是非响应式

数组函数

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '函数测试'
        },
        methods: {
          btnClick(){
            let nums = [21,65,46,87];
            /*let newNum = nums.filter(function (n) { //过滤数组返回为true的这个数组值放入新数组
              return n<50;
            })*/
            /*let newNum = nums.map(function (n) { //对数组数据进行处理返回值加入新数组数组
                return n*2
            })*/
            /*let newNum = nums.reduce(function (p,n) {  //对数组进行处理 返回单个值
                return p+n
            },0)*/
            let newNum = nums.filter(function (n) {
                return n<50
            }).map(function (n) {
                return n*2
            }).reduce(function (p,n) {
              return p+n
            },0)
            console.log(newNum);
          }
        }
    })
</script>

filters过滤器

<td>{{ book.price | showPrice}}</td>
filters: {
    showPrice(price){
      return '￥'+price.toFixed(2);
    }
  },

v-model双向绑定
与radio 可以当做name=“sex” 使用作用效果一致

<script src="../js/vue.js"></script>
<div id="app">
    <h2>{{ message }}</h2>
    <!--for为label指定标签，点击label相当于点击for指定的id标签-->
  <label for="man">男</label><input id="man" type="radio" v-model="sex" value="男">
  <label for="woman">女</label><input id="woman" type="radio" v-model="sex" value="女">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
          sex: '男'
        }
    })
</script>

与复选框 CheckBox

<script src="../js/vue.js"></script>
<div id="app">
    <h2>{{ message }}</h2>
  <label for="man">男</label><input id="man" type="radio" v-model="sex" value="男">
  <label for="woman">女</label><input id="woman" type="radio" v-model="sex" value="女">
  <hr>
  <input id="yes" type="checkbox" v-model="isAgree"><label for="yes">同意</label> <!--单选对应的是Boolean值多选对应的是value 数组-->
  <button :disabled="!isAgree">下一步</button>
  <hr>
  <input id="lq" type="checkbox" value="篮球" v-model="hobbies"><label for="lq">篮球</label>
  <input id="zq" type="checkbox" value="足球" v-model="hobbies"><label for="zq">足球</label>
  <input id="pq" type="checkbox" value="排球" v-model="hobbies"><label for="pq">排球</label>
  <br>
  <h2>{{hobbies}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message: 'hello vue',
          sex: '男',
          isAgree: '',
          hobbies: []
        }
    })
</script>

与下拉选select单选与多选

<script src="../js/vue.js"></script>
<div id="app">
    <h2>{{ message }}</h2>
  <select name="a" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
  </select>
  <hr>
  <select name="b" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
  </select>
  <hr>
  <h2>{{fruit}}</h2>
  <h2>{{fruits}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '练习select model',
          fruit: '西瓜',
          fruits: []
        }
    })
</script>

v-model修饰符

gao1017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue js学习

hide:true 隐藏展示字段addDisplay:false 隐藏from表单字段search:true 搜索字段searchLabelWidth:90, 搜索label宽度dicUrl: ``, 下拉选远程数据cascaderItem：[] 关联字段editDisplay: false, from表单隐藏字段editDisabled: true, from表单不可编辑dicData：[] 静态字典select下拉选valueFormat: “yyyy-MM-dd HH:mm:ss”
复制链接

扫一扫