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. Neo4j集群环境建设

    简介: Neo4j它是目前的主流地图数据库.它本身提供了高可用性集群解决方案.本文将试图建立一个高可用性neo4j周围环境. 1. 这是一个地图数据库? 图形库(graphic database)问题 ...

  2. C++学习笔记26，虚函数

    在C++里面,虚拟功能是功能的一类重要!不同目的可以通过在不同的虚拟功能来达到同样的动作被定义. 举一个简单的例子: #include <iostream> #include <st ...

  3. Matlab随笔之插值与拟合（下）

    原文:Matlab随笔之插值与拟合(下) 1.二维插值之插值节点为网格节点 已知m x n个节点:(xi,yj,zij)(i=1…m,j=1…n),且xi,yi递增.求(x,y)处的插值z. Matl ...

  4. 手把手教你开发Nginx模块

    前面的哪些话 关于Nginx模块开发的博客资料,网上很多,很多.但是,每篇博客都只提要点,无法"step by step"照着做,对于初次接触Nginx开发的同学,只能像只盲目的蚂 ...

  5. WPF - Group分组对ListBox等列表样式的约束

    原文:WPF - Group分组对ListBox等列表样式的约束 在做WPF主题支持时,出现一个分组引起的莫名错误,可是折腾了我一番.在没有使用样式时,列表分组很正常,使用了别人写的ListBox列表 ...

  6. WPF 4 DataGrid 控件（进阶篇二）

    原文:WPF 4 DataGrid 控件(进阶篇二)      上一篇<WPF 4 DataGrid 控件(进阶篇一)>中我们通过DataGridTemplateColumn 类自定义编辑 ...

  7. JS IE和火狐兼容性问题

    <script type="text/javascript">        onload = function () {           document.get ...

  8. 对复杂字典Dictionary<T1,T2>排序问题

    原文:对复杂字典Dictionary<T1,T2>排序问题 //VoltageCount类(电压值对应的数量):    public class VoltageCount    {     ...

  9. 同时使用SpringJUnit4ClassRunner和Parameterized进行参数化

    标题实际上是个不可能完成的任务,因为我们只能用一个Runwith注解,而且只能写一个类,但是我们可以曲线救国,插入下方的5到14行就可以注入了 @ContextConfiguration(classe ...

  10. php延时执行

    sleep(秒) usleep(毫秒) 让它睡上一会.