Vue新手指南之环境搭建及入门

2024-07-31 06:46:01

初始Vue

什么是Vue？

一套用于构建用户界面的渐进式JavaScript框架

Vue可以自底向上逐层的应用

简单应用：只需要一个轻量小巧的核心库

复杂使用：可以引入各式各样的Vue插件

Vue的特点：

1、组件化模式，提高代码复用率，更好维护代码

2、声明式编码：无需直接操作DOM，提高开发效率

3、使用虚拟DOM+Diff算法，复用DOM节点

搭建Vue开发环境

1、下载vue.js

2、创建项目并导入idea

3、官网下载：https://github.com/vuejs/devtools/tree/main

并使用Vue.js devtools

注：在此之后你打开的网页如果是有Vue写的，那头部的Vue小标识会变成绿色

以上Vue环境就搭建ok啦

创建Vue实例

1、想让Vue工作,就必须创建一个Vue实例且要传入一个配置对象

2、root容器里的代码依然符合html规范只不过混入了一些特殊的Vue的语法

3、root容器里的代码被称为[Vue模板]

4、Vue实例和容器是一一对应的

5、真实开发中只有一个vue实例,并且会配合着组件一起使用

6、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性

7、一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更换

注意区分js表达式和js代码

1、表达式:一个表达式会生成一个值可以放在任何一个需要值的地方

(1)a (2)a+b (3)demo(1) (4)x===y?‘a':‘b'

2、js代码(语句)

(1)if(){} (2)for(){}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue开发版-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--准备容器 为Vue提供模板 把Vue的成果展示-->
<div id="root">
    <!--{{js表达式}}  插值语法-->
    <h1>Hello!{{name.toUpperCase()}},{{address}}</h1>
</div>
    <script type="text/javascript">
        Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。

       //创建vue实例
        new  Vue({
        //el用于当前Vue实例为哪个容器服务 值通常为css选择器字符串
            el:'#root',
            //data中用于存储数据 数据供el所指定的容器去使用,值暂时写成一个对象.
            data:{
                name:"南风知我意",
                address:"上海"
            }
        })
    </script>
</body>
</html>

运行结果：

Vue模板语法

Vue模板语法有两大类

1、插值语法:

功能:用于解析标签体内容

写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

2、指令语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)

举例:v-bind:href=“xxx” 或简写为 :href=“xxx”,xxx同样要写js表达式
且可以直接读取data中的所有属性

备注:Vue中有很多指令,且形式都是:v-???,此处我们只是拿v-bind举例

<!--准备容器-->
<div id="root">
  <h1>插值语法</h1>
  <h3>你好,{{name}}</h3>
  <hr/>
  <h1>指令语法</h1>
  <!--绑定 url当作表达式-->
  <a v-bind:href="school.url.toUpperCase()" x="hello">去{{school.name}}</a>
 <a :href="url" x="hello">去{{name2}}</a>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
  new Vue({
    el:'#root',
    data:{
      name:'南风知我意',
      school:{
        name: 'csdn',
        url:'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
      }
    }
  })
</script>

运行结果：

Vue数据绑定

Vue中有2种数据绑定的方式:

1、单向绑定( v-bind):数据只能data流向页面

2、双向绑定( v-model):数据不仅能从data流向页面还可以从页面流向data

备注:

1、双向绑定一般都应用在表单元素上(如:input、select等)

2、 v-model:value可以简写为 v-model,因为 v-model的默认收集的就是value值

<!--准备一个容器-->
<div id="root">
    <!--普通写法-->
<!--  单向数据绑定:<input type="text" v-bind:value="name"><br>
  双向数据绑定:<input type="text" v-model:value="name"><br>-->
    <!--简写-->
    单向数据绑定:<input type="text" :value="name"><br>
    双向数据绑定:<input type="text" v-model="name"><br>
    <!--如下代码 错误: v-model只能应用在表单类元素(输入类元素)上-->
    <h2 v-model:x="name">你好啊</h2>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  new Vue({
    el:'#root',
    data:{
      name:'南风知我意'
    }
  })
 </script>

运行结果：

el-data的两种写法

data与el的两种写法

1、el有2种写法

(1)new Vue时候配置el属性

(2)先创建Vue实例,随后再通过vm.$mount('#root')指定el的值

2、data有2种写法

(1)对象式

(2)函数式

如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错

3、一个重要原则

由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数 this就不再是Vue实例了

<!--准备容器-->
<div id="root">
  <h1>你好,{{name}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  //el的两种写法
  const v=new Vue({
    //el:'#root',  //第一种写法
    data:{
      name:'尚硅谷'
    }
  })
  console.log(v)
  v.$mount('#root') //第二种写法

  //data的两种写法
  const v=new Vue({
    el:'#root',
    //data的第一种写法 对象式
    /*data:{
      name:'尚硅谷'
    }*/

    //data的第二种写法:函数式
    data(){
      console.log('@@@',this)  //此处的this是Vue实例对象
      return{
        name:'南风知我意'
      }
    }
  })
</script>

MVVM模型

1、M:模型(Model):data中的数据

2、V:视图(View):模板代码

3、VM:视图模型(ViewModel):Vue实例

观察发现:

1、data中的所有属性在最后都出现在了vm身上

2、vm身上所有的属性及Vue原型上的所有属性,在Vue模板中都可以直接使用

<!--准备容器-->
<div id="root">
  <!--view-->
  <h1>学校名称:{{name}}</h1>
  <h1>学校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  const vm=new Vue({  //viewmodel
    el:'#root',
    data:{
      /*model*/
      name:'南风',
      address:'长沙'
    }
  })
  console.log(vm)
</script>

Vue数据代理

通过一个对象代理对另一个对象中属性的操作(读、写)

1、Vue中的数据代理:

通过vm对象来代理data对象中的属性的操作(读、写)

2、Vue中数据代理的好处

更加方便的操作data中的数据

3、基本原理

通过Object.defineProperty()把data对象中所有的属性添加到vm上

为每一个添加到vm上的属性都指定一个getter、setter

在getter、setter内部去操作(读、写)data中对应的属性

<!--准备容器-->
<div id="root">
    <!--view-->
    <h1>学校名称:{{name}}</h1>
    <h1>学校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止Vue在启动时生成生产提示
    const vm=new Vue({
        el:'#root',
        data:{
            name:'南风',
            address:'长沙'
        }
    })
</script>

Vue中的事件处理

事件的基本使用:

1、使用v-on:xxx 或 @xxx绑定事件其中xxx是事件名

2、事件的回调需要配置在methods对象中,最终会在vm上

3、methods中配置的函数,不需要箭头函数否则this就不是vm了

4、methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象

5、@click="demo"和@click="demo($event)"效果一致,但后者可以传参

<!--准备容器-->
<div id="root">
    <h1>欢迎来到尚硅谷学习</h1>
    <!--<button v-on:click="showInfo">点我提示信息</button>-->
    <button @click="showInfo1">点我提示信息1</button>
    <button @click="showInfo2(66,$event)">点我提示信息2</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止Vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data: {
            name: '尚硅谷'
        },
        methods:{
            showInfo1(event){
               /* console.log(event.target.innerHTML)
               console.log(this)  //此处的this是vm*/
                alert("同学你好1")
            },
            showInfo2(number,a){
                /* console.log(event.target.innerHTML)
                console.log(this)  //此处的this是vm*/
                alert("同学你好2")
                console.log(number,a)
            }
        }
        })
        </script>

总结

到此这篇关于Vue新手指南之环境搭建及入门的文章就介绍到这了,更多相关Vue环境搭建及入门内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解如何从零开始搭建Express+Vue开发环境

准备工作 1. 为前端选择合适的预处理工具和资源管理工具预处理工具又分为 js 预处理工具和 css 预处理工具.Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制,所有 js 代码文件在被 html 页面引入后将共用同一个命名空间.所以才出现了各种"标准"尝试解决这个问题,但他们都不是原生的,需要额外的工具对代码进行特殊处理.虽然 ES6 终于引入了模块机制,但以现在的浏览器支持程度,还不足以"毫无顾虑地随拿随用".所以 js 预处理工具最主要
Vue项目环境搭建详细总结

关于Vue安装的详细步骤总结安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用
基于Vue2的移动端开发环境搭建详解

前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa
windows下vue.js开发环境搭建教程

最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希望初
Vue.js开发环境搭建

一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul
手把手搭建安装基于windows的Vue.js运行环境

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击配置步骤跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗? 如上述Vue.js不是个全能的框架,因为他
超简单的Vue.js环境搭建教程

vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到
Vue.js开发环境快速搭建教程

Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装
Vue2.0 从零开始_环境搭建操作步骤

简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)
vue中mint-ui环境搭建详细介绍

vue中mint-ui环境搭建详细介绍首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil