正文

vue基础(代码片段)

dehao  dehao  2022-12-18  275

关键词：

vue

使用方式：

? 方法一：官网下载安装

? 方法二：通过npm引入依赖（安装node,node里包含npm）

查看版本指令（查看是否以安装）：

? node -v

? npm -v

NPM（Node）安装和镜像的设置

切换镜像方式：

? 手动切换

? 工具切换(nrm)

1.安装nrm:

? npm install nrm -g //-g 全局安装

2.查看nrm镜像：

? nrm ls

技术图片

测试镜像速度：

? nrm test npm

3.更改镜像

? nrm use taobao //使用阿里的镜像

在项目中引入vue

idea创建一个空项目

在model中加入static web

进入终端窗口

? npm init -y //初始化项目

安装vue

? npm install vue --save //--save 本地安装只对当前项目可用

在html中引入vue

<body>
<script src="node_modules/vue/dist/vue.js"></script>
</body>

vue基本使用


<div id="app">
    <button @colck="click">执行函数</button>
    <input type="text" v-model = num>  //双向绑定
    <h2>name </h2>
    <br>num
</div>
?
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue(   //创建vue对象
        el:"#app",        // el,即element。要渲染的的页面元素
        data:            // 数据
            name:"",
            num: 0
        ,
    methods:            //定义方法函数
        click()
            console.log("hello");
            
        ,
        created()                                 //钩子函数
            //向后台发起AJAX请求，初始化date数据
            this.name = "jdh";                     //this指向vue对象
            setTimeout(( ) => this.name = "jiang",2000)
    
?
    );
</script>

vue生命周期

技术图片

? 技术图片

vue基础——html版的vue入门基础(代码片段)

文章目录1、Vue两大特性2、vue指令2.1、内容渲染指令（1）`v-text`（2）``：插值表达式（3）`v-html`2.2、属性绑定指令使用Javascript表达式2.3、事件绑定指令（1）事件内置的变量ÿ 查看详情

vue基础——html版的vue入门基础(代码片段)

vue基础——单网页版的vue学习基础(代码片段)

文章目录1、vue-cli1.1、什么是vue-cli1.2、vue-cli安装2.、vue项目结构和运行2.1、vue项目目录结构2.2、vue项目的运行流程2.3、运行命令3、Vue组件（components）3.1、私有子组件3.2、全局组件3.3、单行（一行）方法的简写3.3.1... 查看详情

vue基础——单网页版的vue学习基础(代码片段)

vue基础篇二(代码片段)

Vue组件组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,是可复用的Vue实例.组件的注册//html代码<divid="app"><my-component></my-component></div>//js代码Vue.component(‘my-component‘,template:‘&l 查看详情

vue基础特性(代码片段)

在这里我们主要是讲解一些vue实例的属性和一些基础的指令vue实例属性:其实和我们之前所学的对象的属性是相似的东西 vue的基础指令: 对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解指令:可以看做... 查看详情

vue的基础语法(代码片段)

------------恢复内容开始------------1、Vue的简单模板<divid="app"><h1>msg</h1></div><script>//2.创建一个vue实例对象constMyVue=newVue(//3.告诉vue对象需要控制的界面上的区域el:"#app",//4.告诉vue实例对象，控制区域内的数查看详情

vue基础知识(代码片段)

目录vue基础helloVue.模板语法-文本语法文本模板语法-属性使用JavaScript表达式条件指令v-ifv-show指令列表渲染基本用法对象循环输出key事件处理方法事件修饰符侦听器对象变化监听自定义指令vue基础Vue.js的定位是一个渐进式框架前... 查看详情

前端-vue基础1(代码片段)

Vue核心思想：只要改变数据，页面就会发生改变1.引入vue1.下载vue.js2.在script标签的src属性中，引入vue.js<scriptsrc="js/vue.js"></script>2.vue实例el：vue接管的div元素，注：只能接管一个div，所有需要vue处理的，必须写在这个div中... 查看详情

vue.js基础(代码片段)

vue.js引入vue.js文件:vue的基本语法？触发事件?一个小代码：效果图:提出问题？怎么使用data中数据?怎么使用methods中函数？1.vue.js是引入vue文件才可以使用vue.js引入vue.js文件:官网的外部文件<scriptsrc="https://cdn... 查看详情

vue全家桶之vue基础指令(代码片段)

✍、目录总览🔥Vue🔥🔥Vue全家桶地址🔥Vue全家桶之Vue基础指令(一)https://blog.csdn.net/Augenstern_QXL/article/details/120117044🔥Vue全家桶之Vue组件化开发(二)https://blog.csdn.net/Augenstern_QXL/arti 查看详情

39.vue基础(代码片段)

环境搭建node.js安装https://nodejs.org/en/cnpmnpminstall-gcnpm--registry=https://registry.npm.taobao.orgcpnm全局安装vue-clicnpminstall-gvue-cli 目录下创建一个基于webpack模板的新项目vueinitwebpackmy-first-project设置项目查看详情

vue组件基础(代码片段)

gitHub地址：https://github.com/huangpna/vue_learn里面的lesson06一vue组件基本实例举个例子：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>app1</title></head&g 查看详情

vue基础(代码片段)

1.搭建项目架构：项目采用Webpack+Vue-router的架构方式，开始安装（全部在windows系统上操作，我也没有mac电脑）。1.按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令： npminstall-gcnpm--registry=https://registry.npm.t... 查看详情

vue基础篇---vue组件《2》(代码片段)

定义全局组件我们通过Vue的component方法来定义一个全局组件。<divid="app"><counter></counter></div><scriptsrc="./node_modules/vue/dist/vue.js"></script><scripttype= 查看详情

vue基础2(代码片段)

1.vuecli简介VueCLI致力于将Vue生态中的工具基础标准化VueCLI是一个基于vue.js进行快速开发的完整系统，是一个全局安装的npm包，基于webpack构建，丰富的官方插件集合，集成了前端生态中最好的工具，一套完全图形化的创建和管理Vue... 查看详情