Vue.js入门

最新推荐文章于 2022-04-06 15:39:56 发布
最新推荐文章于 2022-04-06 15:39:56 发布
阅读量241 收藏
点赞数
分类专栏： 前端开发 文章标签： vue

一、写一个简单的Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门e</title>
    <script src="js/vue.js"></script><!-- 放在head头，避免页面出现抖屏的问题-->
</head>
<body>
    <div id="root">{{msg}}</div>
    <script>
        new Vue({
            el: "#root", //接管#root元素，与此DOM节点绑定
            data: {
                msg: "Hello world!"
            }
        });
    </script>
</body>
</html>

二、挂载点、模板、实例

挂载点：上面的例子中，如下元素为vue实例的挂载点

<div id="root"></div>

模板：在挂载点内部的{{}}内容，为模板内容

<div id="root">{{msg}}</div>

也可以这样写：

<div id="root"></div>

<script>
new Vue({
            el: "#root",
            template: "<h1>{{msg}}</h1>",
            data: {
                msg: "Hello world!"
            }
        });
</script>

三、Vue实例中的数据、事件与方法

数据：

    <div id="root">
        <h1>{{num}}</h1><!--这叫插值表达式-->
        <h2 v-text="num"></h2>
        <h3 v-html="num"></h3>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "Hello world!",
                num: "<i>123</i>"
            }
        });
    </script>

这里写图片描述
事件：实现效果，点击hello后变成world

<body>
    <div id="root">
        <div v-on:click="handleClick">{{content}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                content:"hello"
            },
            methods:{
                handleClick: function () {
                    //数据变化，vue会自动更新DOM
                    this.content = "world"
                }
            }
        });
    </script>
</body>

还可以简写为：

<div @click="handleClick">{{content}}</div>

四、Vue中的属性绑定和双向数据绑定

属性绑定：

<body>
    <div id="root">
        <div v-bind:title="title">hello world</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                title: "this is hello world"
            }
        });
    </script>
</body>

还可以简写为：

<div :title="title">hello world</div>

双向数据绑定：
单向绑定：数据决定页面的显示，但是页面无法决定数据
这里写图片描述

<body>
    <div id="root">
        这是单向绑定：<input :value="content"><br>
        这是双向向绑定：<input v-model="content">
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                content: "this is content"
            }
        });
    </script>
</body>

五、Vue中的计算属性和侦听器

<body>
    <div id="root">
        姓：<input v-model="firstName">
        名：<input v-model="lastName">
        <div>{{firstName}}{{lastName}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: "",
                lastName: ""
            }
        });
    </script>
</body>

计算属性：

<body>
    <div id="root">
        姓：<input v-model="firstName">
        名：<input v-model="lastName">
        <div>{{fullName}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: "",
                lastName: ""
            },
            computed:{
                fullName: function () {
                    //只有数据发送变化时才会重新计算，如果数据未变化，会利用缓存
                    return this.firstName+' '+this.lastName;
                }
            }
        });
    </script>
</body>

侦听器：
场景：对姓名做任意变更，数字加1
这里写图片描述

<body>
    <div id="root">
        姓：<input v-model="firstName">
        名：<input v-model="lastName">
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: "",
                lastName: "",
                count: 0
            },
            computed: {
                fullName: function () {
                    //只有数据发送变化时才会重新计算
                    return this.firstName+' '+this.lastName;
                }
            },
            //侦听器
            watch: {
                fullName: function () {
                    this.count++;
                }
            }
        });
    </script>
</body>

六、v-if, v-show与v-for指令

这里写图片描述
v-if：修改DOM结构，如果里面的值是false，会直接从DOM中删除该节点

<body>
    <div id="root">
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show=!this.show;
                }
            }
        });
    </script>
</body>

v-show：使用display控制，因此使用v-show性能更好

<body>
    <div id="root">
        <div v-show="show">hello world</div>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show=!this.show;
                }
            }
        });
    </script>
</body>

v-for：

<body>
    <div id="root">
        <ul>
            <li v-for="item of list">{{item}}</li>
            <li v-for="item of list" :key="item">{{item}}</li><!--key属性，要求每一项的数值都不能相同，会提升每一项渲染的性能-->
            <li v-for="(item , index) of list" :key="index">{{item}}</li><!--可以修改为下标-->
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                list: [1,2,3]
            }
        });
    </script>
</body>

七、一个最简单的todolist功能开发
这里写图片描述

<body>
    <div id="root">
        <div>
            <input v-model="inputValue">
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <li v-for="(item, index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                inputValue: "",
                list: []
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue);
                    //清空input框
                    this.inputValue='';//双向绑定
                }
            }
        });
    </script>
</body>

八、todolist组件拆分

组件：简单理解，页面上的某一部分
假如li标签里的内容很多，将它拆分为一个组件。
如何创建组件？

<body>
    <div id="root">
        <div>
            <input v-model="inputValue">
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <todo-item
                    v-for="(item, index) of list"
                    :key="index"
                    :content="item"
            ></todo-item> <!--content属性用来给组件传参-->
        </ul>
    </div>
    <script>
        //全局组件
        Vue.component('todo-item',{
            props: ['content'],
            template: '<li>TODO: {{content}}</li>'
        });
        new Vue({
            el: "#root",
            data: {
                inputValue: "",
                list: []
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue);
                    //清空input框
                    this.inputValue='';//双向绑定
                }
            }
        });
    </script>
</body>
//局部组件
var TodoItem={
    template: "<li>item</li>"
};

new Vue({
    el: "#root",
    components: {
        'todo-item': TodoItem
    }
});

每一个Vue组件，其实也是一个Vue实例。

Vue.component('todo-item',{
    props: ['content'],
    template: '<li @click="handleClick">TODO: {{content}}</li>',
    methods: {
        handleClick: function () {
            alert('clicked');
        }
    }
});

九、实现删除功能（组件间的交互）

<body>
    <div id="root">
        <div>
            <input v-model="inputValue">
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <todo-item
                    v-for="(item, index) of list"
                    :key="index"
                    :content="item"
                    :index="index"
                    @delete="handleDelete"
            ></todo-item>
        </ul>
    </div>
    <script>

        Vue.component('todo-item',{
            props: ['content','index'],//从父组件接收参数
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function () {
                    //组件向外触发delete事件，同时传入index值
                    this.$emit('delete',this.index);
                }
            }
        });

        new Vue({
            el: "#root",
            data: {
                inputValue: "",
                list: []
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue);
                    //清空input框
                    this.inputValue='';//双向绑定
                },
                handleDelete: function (index) {
                    this.list.splice(index,1);
                }
            }
        });
    </script>
</body>

十、 Vue-cli的简介与使用

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发即可。
全局安装vue-cli：

npm install -g vue-cli

创建一个基于webpack模块的新项目：

vue init webpack my-project

进入项目目录，启动项目：

npm run dev

项目目录结构：
这里写图片描述
使用vue-cli开发上面的TodoList：
src/main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
});

src/TodoList.vue：

<template>
  <div><!--template下必须有一个大标签包裹所有的标签-->
    <div>
      <input v-model="inputValue"/>
      <button @click="handleClick">提交</button>
    </div>
    <ul>
      <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todo-item>
    </ul>
  </div>
</template>
<script>
import TodoItem from './components/TodoItem';
export default {
  components: {
    'todo-item': TodoItem
  },
  data() {
    return {
      inputValue: '',
      list: []
    }
  },
  methods: {
    handleClick(){
      this.list.push(this.inputValue);
      this.inputValue='';
    },
    handleDelete(index){
      this.list.splice(index,1);
    }
  }
}
</script>
<style>
</style>

src/components/TodoItem：

<template>
  <li @click="handleClick">{{content}}</li>
</template>
<script>
export default {
  props: ['content','index'],
  methods: {
    handleClick(){
      this.$emit('delete',this.index);
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

十一、全局样式与局部样式

<style scoped>
  .item{
    color: green;
  }
</style>

scoped的作用是只有当前组件里的模板才会对里面的样式生效，即一个组件的样式只对当前组件有效。

akubaba
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3封装组件时 :xxx 这种写法是什么意思呢
weixin_35756130的博客
02-07 102
这种写法是一种 JavaScript 的语法，称为对象的解构赋值。它允许您从对象中提取值，并将它们分配给独立的变量。在这种情况下，xxx 是一个变量，它将被分配到对象中的一个值。 ...
Vue学习 - :xxx=“变量“
Java_Scholar0的博客
10-29 445
Vue一、:xxx="变量"问题描述二、分析三、总结 一、:xxx="变量"问题描述 以下拉框为例解释: <el-col :span="9"> <el-form-item label="状态:"> <el-select v-model="formInline.osiStatus" placeholder="请选择"> <el-option value="1" label="正常">正常</el-option>
JQuery 之 Ajax 开发基础知识
xx_xxxxxxxxxx1120的博客
09-12 672
1、jQuery.ajax(options)jQuery 库拥有完整的 Ajax 兼容套件，所以我们再也不用整天为考虑浏览 是否兼容ajax问题头疼。 $.ajax({ type: "GET", url: "php.php", data: { PHP: "100", Name: "Jquery" }, success:function(data, st){
【Vue】v-xxx指令全面总结
丧心病狂Loli控的博客
04-13 569
文章目录v-text & v-htmlv-modelv-onv-forv-if & v-showv-bind v-text & v-html 在讲这两个指令之前，先说说我们很熟悉的 插值，再来说说用这两条指令替代插值的好处。 语法: {{插值表达式}} 说明： （1）这是使用Vue实例最简单的方式——花括号内部可以直接使用Vue实例的数据和方法 （2）不管是直接写个js语句，还是调用Vue实例，花括号内部必须有返回值 （3）当网速过慢，数据尚未加载成功时，页面时会显示最原始的花括
VUE xxx
万物皆字节
06-23 265
记录 新建文件夹 a、npm init -y b、npm install vue computed watch 组件 Vue.component()
vue.js入门源代码
08-07
vue.js入门源代码
Vue.js入门教程.pdf
最新发布
06-18
自学笔记，Vue.js入门教程 Vue.js的安装过程可以大致分为以下几个步骤，下面将按照清晰的格式进行说明： 1. 安装Node.js Vue.js是基于Node.js构建的，因此需要先安装Node.js环境。 访问Node.js官网...
Vue.js入门爬坑项目实例1
09-01
整个文件就是官网：https://cn.vuejs.org/v2/guide/#Vue-js-是什么 入门介绍，虽然官网介绍的步骤着实详尽，但作为萌新入门还是有一些坑， 特将自己爬坑的代码贡献出来。希望对大家能有帮助。
vue.js入门教程
08-23
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其易学易用、性能优秀和组件化设计而备受开发者喜爱。本教程旨在帮助初学者快速掌握Vue.js的基础知识并逐步深入到专业应用。 一、Vue.js基本概念 1. **...
vue.js入门教程之基础语法小结
12-28
Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。 <!-- ...
Vue基础 - Vue语法
吾昂王
12-08 953
模板语法 Vue模板语法有两大类 1、插值语法 功能：用于解析标签体内容 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性 2、指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…） 举例：v-bind:href='xxx'或简写为:href='xxx'，xxx同样要写js表达式，且可以直接读取到data中的所有属性 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子 3、示例 <!DOCTYPE html> &l
vue基础用法&基础原理整理
热门推荐
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
vue data-v-xxx
pobu168的博客
03-31 2万+
现象：在Vue开发中，会遇到html被浏览器解析后，在标签中出现’data-v-xxxxx’标记，如下：<div data-v-fcba8876 class="xxx"> aaa</div>原因：来看官方解释：<style scoped> @media (min-width: 250px) { .list-container:hover { background: orang
vue基础
人生代码 ---- 公众号
11-24 1278
(2).前端框架与库的区别? jquery 库 -&gt; DOM(操作DOM) + 请求 art-template 库 -&gt; 模板引擎 框架 = 全方位功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 KFC的世界里,库就是一个小套餐, 框架就是全家桶 代码上的不同 一般使用库的代码，是调用某个函数，我们自己把控库的代码 一般使用框架，其框架在帮...
vue中{{}}
cmolong的博客
03-08 3万+
vue的{{ }}可以是 表达式 字符串 函数 正则表达式 boolean
关于$符号总结一下
CoCoManYYn的博客
05-23 2万+
vue的实例属性和方法 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：   var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // =&gt; true vm.$el === doc...
vue :class 动态绑定样式_（Vue基础）5.Vue中样式绑定（:class和:style）
weixin_39858132的博客
11-22 366
关键词：数据和样式进行绑定：class的对象/数组绑定、style的对象/数组绑定:class="{activated: isActivated}":class="[activated]":style="styleObj" :style="[styleObj], {fontSize: 18px}" 实现需求：点击hello world，字的颜色如：变红 ——> 点击：变黑 ——> ...
Vue入门
xxxo3oxxx的博客
12-10 517
静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 aj...
vue 修改模板{{}}标签_Vue的模板语法、指令、修饰符
weixin_35348182的博客
01-12 787
一、模板template的三种写法第一种写法，Vue完整版，写在.html里引入vue的完整版复制代码.html{{n}}+1复制代码以下代码把上述变成含有n的值的dom节点，写在main.js里面new Vue({el: "#xxx",//挂载点data:{n:0},//data 可以改成函数methods:{add(){}}})复制代码第二种写法，Vue完整版，写在选项里new Vue(opt...
前端开发-第一章Vue入门.docx
11-13
。。。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值