vue基础核心

最新推荐文章于 2022-10-10 19:54:40 发布

yaya安若

最新推荐文章于 2022-10-10 19:54:40 发布

阅读量243

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42056687/article/details/108088177

版权

1，Vue是什么？

Vue是一套用于构建用户界面的渐进式框架。

2，Vue的基础指令

2.1v-cloak(防止页面加载时出现闪烁）

用法1:通过属性选择器选择到带有属性 v-cloak的标签设置它的样式

 [v-cloak]{
    display: none;
  }

用法二： <div v-cloak >{{msg}}</div>防止网速过慢页面加载时出现插值表达式。

2.2v-text

  <p v-text="msg">========</p>

注：此用法会替代元素内原有内容，且不会解析html标签

2.3v-html

<p v-html="html">======</p>

注：此用法通v-text一样也会覆盖元素内原有内容，不同的是它可以解析html标签。

2.4v-pre

跳过这个元素和它的子元素的编译过程。

<span v-pre>{{msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

2.5v-once

   <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
</script>

注：当data中msg数据发生改变是标签内仍显示第一次data里存放的数据。

2.6v-model

数据的双向绑定，限制在 <input>、<select>、<textarea>、components中使用

<div id="app">
      <div>{{msg}}</div>
      <div>
          //当输入框中内容改变的时候，div中的会自动更新
        <input type="text" v-model='msg'>
      </div>
  </div>

2.7v-on

用来绑定事件的
形式如：v-on:click 缩写为 @click;

 <button v-on:click='handle1'>点击1</button>  //绑定点击事件的handlel方法

注：v-on方法绑定的事件函数中可传递参数。

2.7.1事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件的默认事件 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 既阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="show"></a>
<!-- 阻止自身的事件处理函数 -->
<div v-on:click.self="show">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.7.2按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alert" >

常用的按键修饰符有：
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右

2.7.3自定义按键修饰符别名、

 Vue.config.keyCodes.f5 = 11;  //  预先定义了keycode 11（即F5）的别名为f5

2.8v-bind

v-bind 指令被用来响应地更新 HTML 属性
v-bind 可以缩写为 :

<img :title="绑定属性操作">

v-bind可绑定对象

我们可以给v-bind:class 一个对象，以动态地切换class。
注意：v-bind:class指令可以与普通的class特性共存

        <!-- <h1 :class="['red','thin']">这是一个很强大的h1标签,大到你无      法想象</h1> -->

        <!-- 第二种方式: 使用三元表达式 -->
        <!-- <h1 :class="['red','thin',flag?'active':'']">这是一个很强大的h1标签,大到你无法想象</h1> -->

        <!-- 第三种方式: 对象 -->
        <!-- <h1 :class='classObj'>这是一个很强大的h1标签,大到你无法想象</h1> -->
        
        <!-- <h1 :class="[classObj,styleObj]">这是一个很强大的h1标签,大到你无法想象</h1> -->

2.9v-if，v-show

 <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="flag">
           如果flag为true则显示,false不显示!
        </span>
         <span v-if="show">
           如果flag为true则显示,false不显示!
        </span>

2.10v-for

1，循环数组

<p v-for='(item,i) in list'>索引值:{{i}} ---- 每一项的值:{{item}}</p>

2，循环数组对象

<p v-for='(item,i) in list'>索引值:{{i}} ---- 每一项的值:{{item.bookName}}</p>

3，循环对象

 <p v-for='(val,key,i) in books'>索引值:{{i}} --每一项的key为:{{key}}-- 每一项的值:{{val}}</p>

4，迭代数字

  <p v-for='count in 10'>这是第{{count}}次循环</p>

2.11v-model

数据的双向绑定，可获取单选框中的值
实现案例：简单计算器：

<body>
    <div id="app">
        <!-- 第一个数字 -->
        <input type="text" name="" id="" v-model='ms1'>
        <!-- 运算符 -->
        <select v-model='ys'>
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
      </select>
        <!-- 第二个数字 -->
        <input type="text" name="" id="" v-model='ms2'>
        <!-- 等于符号 -->
        <input type="button" value="=" @click='cal'>
        <!-- 结果栏 -->
        <input type="text" name="" id="" v-text='ms3'>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            ms1: '',
            ys: '+',
            ms2: '',
            ms3: ''
        },
        methods: {
            cal() {
                // alert(this.ys);
                // console.log(this.ys == '+');
                if (this.ys == '+') {
                    this.ms3 = parseInt(this.ms1) + parseInt(this.ms2);
                    console.log(ms3);
                } else if (this.ys == '-') {
                    this.ms3 = parseInt(this.ms1) - parseInt(this.ms2);
                    console.log(ms3);
                } else if (this.ys == '-') {
                    this.ms3 = parseInt(this.ms1) * parseInt(this.ms2);
                    console.log(ms3);
                } else {
                    this.ms3 = parseInt(this.ms1) / parseInt(this.ms2);
                    console.log(ms3);
                }

            }
        }


    })
</script>

2.11.1表单修饰符

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

3，员工列表案例

3.1，创建静态数据存放在vue的data属性中

 data:{
          list:[
                    {id:1,name:'张无忌',ctime:new Date()},
                    {id:2,name:'赵敏',ctime:new Date()}
                ]   
            },

3.2，把创建好的数据渲染到页面上

利用 v-for循环遍历 list 将每一项数据渲染到对应的数据中

 <tr v-for='item in list'>
         <td>{{item.id}}</td>
         <td>{{item.name}}</td>
         <td>{{item.ctime}}</td>
         <td>
            <a href="#" @click.prevent='del(item.id)'>删除</a>
          </td>
                    
 </tr>

3.3，添加图书

通过双向绑定获取到输入框中的输入内容
给按钮添加点击事件
把输入框中的数据存储到 data 中的list 里面

<input type="text" name="id" id="" v-model='id'><br/>
<input type="text" name="name" id="" v-model='name'><br/>
<input type="button" value="添加" @click='add'>

data中增加jd和name的空属性：

data:{
       id:'',
       name:'',
       list:[
             {id:1,name:'张无忌',ctime:new Date()},
             {id:2,name:'赵敏',ctime:new Date()}
          ]   
     },

 add(){
          var car={
                   id:this.id,
                   name:this.name,
                   ctime:new Date()
              };
            this.list.push(car);
                }

3.4,修改图书

点击修改按钮的时候获取到要修改的员工信息
给修改按钮添加点击事件，需要把当前的图书的id 传递过去这样才知道需要修改的是哪一个员工信息
把需要修改的员工信息填充到表单里面
根据传递过来的id 查出list中对应员工的详细信息
把获取到的信息填充到表单
把获取到的信息填充到表单
把获取到的信息填充到表单
把获取到的信息填充到表单
把获取到的信息填充到表单

 addg() {
                    if (this.flag) {
                        this.list.some((item) => {
                            if (item.id == this.id) {
                                item.name = this.name;
                                return true;
                            }
                        });
                        this.flag = false;
                    } else {
                        var car = {
                            id: this.id,
                            name: this.name,
                            ctime: new Date()
                        };
                        this.list.push(car);
                    }
                    this.id = '';
                    this.name = '';
                },
                toedit(id) {
                    this.flag = true;
                    var list = this.list.filter(function(item) {
                        return item.id == id;
                    })
                    console.log(list);
                    this.id = list[0].id;
                    this.name = list[0].name;
                }

3.5根据条件查询图书

computed: {
                list_result() {
                    var _this = this;
                    if (this.keywords) {
                        let newList = this.list.filter(function(item) {
                            if (item.name.indexOf(_this.keywords) >= 0) {
                                return true
                            } else {
                                return false
                            }
                        })

                        return newList
                    } else {
                        return this.list //没有关键词就显示所有的数据
                    }
                }
            },

3.6删除图书

  del(id) {
          this.list.some((item, i) => {
                   if (item.id == id) {
                   this.list.splice(i, 1);
                   return true;
        }
                },

yaya安若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础核心

文章目录1，Vue是什么？2，Vue的基础指令2.1v-cloak(防止页面加载时出现闪烁）2.2v-text2.3v-html2.4v-pre2.5v-once2.6v-model2.7v-on2.7.1事件修饰符2.7.2按键修饰符2.7.3自定义按键修饰符别名、2.8v-bind2.9v-if，v-show2.10v-for2.11v-model2.11.1表单修饰符3，员工列表案例3.1，创建静态数据存放在vue的data属性中3.2，把创建好的数据渲染到页面上3.3，添加图书3.4,修改图书3.
复制链接

扫一扫