Vue基础

对与vue的简洁明了的干货分享，适合小白学习观看，如果有笔误或者想了解更多的，请给笔者留言，后续会继续分享，从零开始的vue相关经验

  • 1、创建vue实例
<div id="app"></div>
const vm = new Vue({
    el:'app',
    data:{

    }
})
  • 2、插值语法
 <!-- 双花括号将数据当成普通文本显示
        其中可以写运算，或者判断等表达式运算
    容易遭受xss攻击 -->
    <div id="box">
        {{name}}
       <p> {{20>30?'小于':'大于'}}</p>
        <p>{{10+20}}</p>
     <!-- v-html 可以将标签解析 -->
    <p v-html="name"></p>
    <p v-if="isShow">我是动态创建和删除</p>
    <p v-show="isShow">我是动态隐藏和显示</p>
      <!-- 简写
        带有v称之为指令
        v-bind ：class = :class//控制一般属性
        v-on click = @click//绑定事件
        v-if  isShow 为true,创建，false删除
        v-show  ....显示，...,隐藏
    -->
    <button v-on:click="handleClick">点击</button>
    <p v-bind:class="isShow?'aa':'bb'"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                name:"<b>xiaoming<b/>",
                isShow:true,

            },
            methods:{
                handleClick(){
                    console.log(11);
                    this.isShow=false;
                }
            }
         })
        </script>
  • 3、条件渲染
<body>
    <div id="box">
        <p v-if="isCreated">渲染删除</p>
        <p v-else>qqq</p>
        <!-- 渲染多个使用template  -->
        <template v-if="isCreated">
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
        </template>
        <!-- v-show不支持template -->
        <p v-show="isShow">显示隐藏</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            isCreated:true
        }
    })
</script>
  • 4、列表渲染
body>
    <div id="box">
        <!-- v-for 循环渲染，可以用 in/of 可以有2个参数（data遍历的值，index下标） -->
        <!-- 每一项应该有一个唯一的key 一般为id -->
        <!-- 列表渲染，可以通过改变数组动态渲染当影响到数组本身时会刷新渲染-->
        <!-- 但通过索引改变无法影响渲染 解决方法vue.set(vm.datalist,0,newvalue)-->
        <input type="text" v-model="mytext">
        <!-- 过滤 -->
        <ul>
            <!-- <li v-for="(data,index) in datalist" :key="index">
                {{data}} -- {{index}}
            </li> -->
            <li v-for="(data,index) in cmputeddatalist" :key="index">
                {{data}} -- {{index}}
            </li>
        </ul>

    </div>
</body>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#box",
            data:{
                datalist:['aa','bb','ccc'],
                mytext:"",
            },
            cmputed:{
                cmputeddatalist:function(){
                    return this.datalist.filter(item=>item.indexof(this.mytext)>-1)
                }
            }
        })
    </script>
  • 5、事件处理
 <div id="box">
<!-- 事件处理方法一：直接触发函数代码表达式 -->
<p>{{count}}</p>
        <button @click="count=count-1">-</button>
        <button @click="count=count+1">+</button>
        <!-- 二：绑定函数名,系统默认将事件对象传过去 -->
        <p>{{name}}</p>
        <button @click="handleClick">click</button>
        <!-- 三：绑定函数需要传参数使用要传事件对象传$event -->
        <button @click="handleClick1(1,2,$event)">click</button>
        <!-- vue中事件触发遵循冒泡 阻止冒泡在click.stop-->
        <!-- 事件修饰符 .stop阻止冒泡  prevent阻止默认事件 once只会触发一次 self只有事件源为本身时才能触发,修饰符可以串联使用.stop.prevent -->
        <ul @click="ulclick ">
            <li  @click="liclick">1111</li>
        </ul>
        <!-- 键值修饰符 enter回车键，space空格键 -->
        <input type="text" v-model="text" @keydown.enter="enter">{{newtext}}
    </div>
        <script src="../vue.js"></script>
        <script>
            var vm =new Vue({
                el:"#box",
                data:{
                    count:1,
                    name:"xiaoming",
                    text:"",
                    newtext:""
                },
                // methods中的方法，可以在this的$options.methods中找到，可以实现方法互用
                methods:{
                    enter(){
                        this.newtext=this.text
                    },
                    handleClick(ev){
                        console.log(ev.target);
                        this.name="aaaa"
                    },
                    handleClick1(a,b,event){
                        console.log(a,b,event.target)
                    },
                    ulclick(){
                        console.log('ul的点击')
                    },
                    liclick(){
                        console.log('li的点击')
                    }
                }
            })
        </script>
  • 6、css与style的绑定
<style>
        .aa{
            background: red;
        }
        .bb{
            background: yellow;
        }
    </style>
</head>

<body>

    <!-- 不会覆盖只是添加到class中  -->
    <!-- v-bind 可以使用数组写法，三目运算符，和对象写法 -->
    <div id="app">
            <p class="red" :class="isshow?'aa':'bb'">css样式</p>
            <p :style="obj">对象样式</p>
            <p :style="[obj,obj2]">数组样式</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                isshow:false,
                obj:{
                    background:"red",
                },
                obj2:{
                    fontSize:"30px"
                }
            }
        })
        // 在vue中向font-size:30px,要写成fontSize:"30px";
    </script>
  • 7、表单的输入与绑定
<body>
    <!-- 表单中v-model 有value时绑定value,单选框中绑定checked属性 -->
    <div id="box">
        <input type="text" v-model="value">{{value}}<br/>

        <input type="checkbox" v-model="isChcked">{{isChcked}}<br/>

<!-- 绑定多个的时候绑定数组，必须有value值，点击会把选中的加入数组中 -->
        <input type="checkbox" v-model="checkgroup" value="react">react<br/>
        <input type="checkbox" v-model="checkgroup" value="vue">vue<br/>
        <input type="checkbox" v-model="checkgroup" value="jquery">jquery<br/>
        {{checkgroup}}
    <!-- 修饰符 lazy 失去焦点时才会同步渲染,number将输入值转换为number trim默认清除首尾空格-->

    <input type="text" v-model.lazy="name">{{name}}<br/>
    <input type="number" v-model.number="age">{{age}}<br/>
    <input type="text" v-model.trim="text">|{{text}}|<br/>

    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            value:"",
            isChcked:false,
            checkgroup:[],
            name:"",
            age:"100",
            text:""
        }
    })
</script>

8.methods中定义方法，

9.computed计算属性，可以当做变量使用，computed会根据数据改变而重新计算，调用多个时，只会执行一次，然后缓存值，methods会多次执行，

10.watch监听某一属性的改变，而触发，（推荐使用computed）

前端Vue基础学习的更多相关文章

  1. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  2. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  3. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  6. 前端——Vue.js学习总结一

    一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...

  7. vue基础学习（二）

    02-01  vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...

  8. vue基础学习（一）

    01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...

  9. 偏前端-vue.js学习之路初级（二）组件化构建

    vue.js   组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

随机推荐

  1. Android官方教程翻译（4）——启动另一个Activity

    Starting Another Activity 启动另一个Activity PREVIOUSNEXT THIS LESSON TEACHES YOU TO 这节课教你 1.   Respond t ...

  2. 在vs中启动项目，同时给项目传递参数

    问题的引出:项目在startup.cs文件中做了控制,根据读取的控制台的ip 和端口启动项目 : dotnet project --ip 127.0.0.1 --port 8001 这样写的好处是  ...

  3. 两个QWidget叠加，可部分代替layout的功能

    在QT开发过程中,有时候会遇到这样的问题,当我们自己创建了一个Layout对象以后,使用QWidget的setLayout方法,将这个Layout对象应用到窗口中的时候,发现窗口上没有我们添加的控件, ...

  4. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

  5. 常见的选择&lt;数据源协议，委托协议&gt;（IOS发展）

    -常见的选择必须满足这两个协议,约定实施.一个为数据源协议 -托付协议负责控制控件UI.事件响应, 实现可选 -数据源协议负责控件与应用数据模型的桥梁,一般必须实现 @interface ViewCo ...

  6. OpenGL（十三） Alpha测试、剪裁测试

    Alpha测试测试就是测试每一个像素的Alpha值是否满足某一个特定的条件,如果满足,则该像素会被绘制,如果不满足则不绘制,跟深度测试的机制是一样的,只不过深度测试考察的是像素的"深度&qu ...

  7. Matlab随笔之求解线性方程

    原文:Matlab随笔之求解线性方程 理论知识补充: %矩阵除分为矩阵右除和矩阵左除. %矩阵右除的运算符号为“/”,设A,B为两个矩阵,则“A/B”是指方程X*B=A的解矩阵X. %矩阵A和B的列数 ...

  8. WPF依赖项属性不需要包装属性也可以工作

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. js 操作样式

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  10. centos 6 yum源记录,离线下载rpm包的办法

    wget -O /etc/yum.repos.d/CentOS6-Base-163.repo http://mirrors.163.com/.help/CentOS6-Base-163.repo rp ...