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基础学习的更多相关文章

Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(2):组件间通信及参数传递
Vue – 基础学习(2):组件间通信及参数传递
Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
[前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
前端——Vue.js学习总结一
一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
vue基础学习（二）
02-01 vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...
vue基础学习（一）
01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...
偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

随机推荐

Notice: Undefined index: user in D:\phpStudy\WWW\js\ls\lsmc\php\add.php on line 9
原文:Notice: Undefined index: user in D:\phpStudy\WWW\js\ls\lsmc\php\add.php on line 9 (初用数据库(mysql)做用 ...
Linux socket编程示例（最简单的TCP和UDP两个例子）
一.socket编程网络功能是Uinux/Linux的一个重要特点,有着悠久的历史,因此有一个非常固定的编程套路. 基于TCP的网络编程: 基于连接, 在交互过程中, 服务器和客户端要保持连接, 不 ...
java项目采用exe4j打包成exe档
java项目采用exe4j打包成exe档前言:我们都知道java是平台无关性.能够打包成jar文件,到不论什么操作系统有jre环境的电脑都能够同意!可是我们打包成exe文件就相当于舍弃了这一大优势, ...
整了一天，明白一个道理：线程里post数据，即loop.exec+quit，然而这个quit之后，导致无法在线程里建立新的loop.exec，直接就退出了
跟踪到exec的代码里,发现: 无奈,把第二个post移到主线程里去执行了. 如果大家发现有好办法,请告知我.
Qt5该插件机制（7）--插件开发演示示例代码（Lower-level API）
插件代码接口类的头文件 MyPluginInterface.h #ifndef INTERFACES_H #define INTERFACES_H #include <QtPlugin> ...
swagger ui 值类型形参加文字注释
例: @ApiImplicitParams({ @ApiImplicitParam(paramType = "query", name = "indexCondition ...
C++中new和delete的背后（最后还是调用了MSVCR90的malloc）
关于 C++中new背后的行为, 以前已经写过一篇了理解C++中new背后的行为, 但是里面也只是泛泛而谈,没有真凭实据, 下面我们从汇编的角度看C++编译器究竟在背后干了什么? 我们的代码很简 ...
Angular路由守卫 canDeactivate
目的离开页面时,做出逻辑判断以ng-alain的项目为基础做演示效果如图: 关键代码定义一个CanDeactivateGuardService export class CanDeactiva ...
关于JSON 字段数据的直接查询
最新的pgSQL 对json的支持在进一步加强!虽然我也学了那么点皮毛,但是json数据对于WEB的开发确实很重要,苦苦学习了很长一段时间,不断的关系PGSQL的动向! 好在翻看很多高人的例子和介绍, ...
C#字符串操作,转自韩迎龙博客
1.1 字符串大小写方法原型 string <strName>.ToUpper(); //返回字符串转换的大写形式 string <strName>.ToLower( ...

前端Vue基础学习

Vue基础

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

随机推荐

热门专题