vue运行环境搭建详解,vue环境配置详细步骤
Vue前端是Java，前端是C#，前端有一个虚拟的DOM引擎。设计理念类似于Java/C#。本文主要介绍Vue新手指南的环境建设和入门的相关信息。有需要的可以参考一下。
目录
初始Vue构建Vue开发环境，创建Vue实例。
e模板语法Vue数据绑定el-data两种编写方法MVVM模型Vue数据代理Vue事件处理总结Vue官网：https://cn.vuejs.org
初始Vue
Vue是什么？
一套用于构建用户界面的渐进式JavaScript框架
Vue可以自下而上逐层涂抹。
简单的应用：只需要一个轻量级的紧凑的核心库。
复杂：可以引入各种Vue插件。
Vue的特征：
1.基于组件的模式，提高代码重用率，更好地维护代码。
2.声明式编码：不需要直接操作DOM，提高了开发效率。
3.使用虚拟DOM Diff算法重用DOM节点。
搭建Vue开发环境
1.下载vue.js
2.创建一个项目并导入想法
3.官网下载：https://github.com/vuejs/devtools/tree/main
并使用Vue.js devtools。
注意：之后如果你打开的网页是Vue写的，那么头上的Vue logo会变成绿色。
上面的Vue环境会构建ok。
创建Vue实例
1.如果您想让Vue工作，您必须创建一个Vue实例并传入一个配置对象。
2.根容器中的代码仍然符合html规范，但是有一些特殊的Vue语法。
3.根容器中的代码称为[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？甲:乙
2.js代码(语句)
(1)if(){} (2)for(){}
html lang=en
头
meta charset=UTF-8
原标题Vue/标题
！Vue开发版本介绍-
脚本类型=text/javascript src=./js/vue.js/script
/头
身体
！-准备容器，为Vue提供模板，展示Vue的成就-
div id=root
！-{{JS expression}}插值语法-
h1你好！{{name.toUpperCase()}}，{{address}}/h1
/div
脚本类型=文本/javascript
Vue . config . production tip=false//防止vue在启动时生成生产提示。
//创建一个vue实例
新Vue({
//el用于当前Vue实例服务的容器。该值通常是css选择器字符串。
el:#root ，
//data用于存储el指定的容器的数据，值临时写成一个对象。
数据：{
名字：“南风知道我的意思”，
地址：“上海”
}
})
/脚本
/body
/html
运行结果：
Vue模板语法
Vue模板语法有两种类型
1.插值语法：
函数：用于解析标签体的内容。
写法：{{xxx}}，xxx是一个js表达式，可以直接读取数据中的所有属性。
2.指令语法：
功能：用于解析标签(包括标签属性、标签正文内容、绑定事件……)
比如：v-bind: href="XXX "或者缩写为：href="XXX "，XXX也要写js表达式。
并且可以直接读取数据中的所有属性。
备注：Vue中有很多指令，都是以：v-？这里我们只是以v-bind为例。
！-准备容器-
div id=root
H1插值语法/h1
H3您好，{{name}}/h3
人力资源/
H1指令语法/h1
！-将url绑定为表达式-
a-bind:href= school . URL . toupper case() x= hello 转到{{school.name}}/a
A :href=url x=hello 转到{{name2}}/a
/div
/body
脚本类型=文本/javascript
Vue . config . production tip=false//防止vue在启动时生成生产提示。
新Vue({
el:#root ，
数据：{
名字：“南风知道我的意思”，
学校：{
名称： csdn ，
网址： https://blog . csdn . net/weixin _ 50823456？spm=1000.2115.3001.5343 ，
}
}
})
/脚本
运行结果：
Vue数据绑定
Vue中有两种数据绑定方式：
1.单向绑定(v-bind):数据只能流向页面。
2.双向绑定(v-model):数据不仅可以从数据流向页面，还可以从页面流向数据。
备注：
1.双向绑定一般应用于表单元素(如input、select等。)
2.v-model:value可以缩写为v-model，因为v-model的默认集合是value value。
！-准备一个容器-
div id=root
！-普通写作-
！-单向数据绑定：input type= text v-bind:value= name br
双向数据绑定：输入类型= text v-model: value= name br-
！-缩写-
单向数据绑定：输入类型= text :值= name br
双向数据绑定：输入类型= text v-model= name br
！-以下代码错误：v-model只能应用于表单类元素(输入类元素)-
H2-型号：x= name Hello /h2
/div
/body
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el:#root ，
数据：{
名字：“南风知道我的意思”
}
})
/脚本
运行结果：
el-data的两种写法
写数据el的两种方法
1.el有两种写法。
(1)new vue时配置el属性
(2)先创建一个Vue实例，然后通过vm指定el的值。$mount(#root )
2.数据可以用两种方式写入。
(1)对象类型
(2)函数公式
如何选择：目前任何一种方式都可以写。以后学习组件时，数据必须使用函数公式，否则会报错。
3.一个重要的原则
Vue管理的函数不能写箭头函数。一旦编写了箭头函数，它就不再是Vue的一个实例。
！-准备容器-
div id=root
H1您好，{{name}}/h1
/div
/body
脚本类型=文本/javascript
Vue.config.productionTip=false
//两种写法//el
const v=new Vue({
//el:#root ，//第一种写法
数据：{
名称：“尚硅谷”
}
})
console.log(v)
动词（verb的缩写）$mount(#root) //第二种写法
//数据的两种写入方式
const v=new Vue({
el:#root ，
//写入//数据的第一种方式是对象类型
/*数据：{
名称：“尚硅谷”
}*/
//数据的第二种写法//函数式
data(){
Console.log (@ @ ，This)//这是一个Vue实例对象
返回{
名字：“南风知道我的意思”
}
}
})
/脚本
MVVM模型
1.m:模型):数据中的数据。
2.v:视图：模板代码
3.VM: ViewModel):Vue实例
观察：
1.数据中的所有属性最终都会出现在虚拟机上。
2.vm和Vue原型的所有属性都可以直接在Vue模板中使用。
！-准备容器-
div id=root
！-查看-
H1学校名称：{{name}}/h1
H1学校地址：{{address}}/h1
/div
/body
脚本类型=文本/javascript
Vue.config.productionTip=false
const vm=new Vue({ //viewmodel
el:#root ，
数据：{
/*型号*/
名称：南风，
地址：“长沙”
}
})
console.log(虚拟机)
/脚本
Vue数据代理
通过一个对象代理对另一个对象的属性进行操作(读、写)
1.Vue中的数据代理：
数据对象中属性的操作(读和写)由vm对象表示。
2.Vue中数据代理的优势
在数据中操作数据更方便。
3.基本原则
通过Object.defineProperty()将数据对象中的所有属性添加到虚拟机中
为添加到vm的每个属性指定一个getter和setter。
在getter和setter中操作(读、写)数据中相应的属性。
！-准备容器-
div id=root
！-查看-
H1学校名称：{{name}}/h1
H1学校地址：{{address}}/h1
/div
/body
脚本类型=文本/javascript
Vue . config . production tip=false//防止Vue在启动时生成生产提示。
const vm=new Vue({
el:#root ，
数据：{
名称：南风，
地址：“长沙”
}
})
/脚本
Vue中的事件处理
事件的基本用途：
1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名称。
2.事件的回调需要在方法对象中配置，并且最终将在vm上进行。
3.方法中配置的函数不需要箭头函数，否则这不是vm。
4.方法中配置的函数都是由Vue管理的，这指向vm或者组件实例对象。
5.@click=demo 和@click=demo($event)的效果是一样的，但后者是可以传递的。
！-准备容器-
div id=root
H1欢迎来到上思谷/h1
！-按钮v-on:点击=显示信息并点击我的消息/按钮-
Button @click=showInfo1 单击我的提示消息1/button
Button @ click= show info 2 (66，$ event)点击我的消息2/button
/div
/body
脚本类型=文本/javascript
Vue . config . production tip=false//防止Vue在启动时生成生产提示。
新Vue({
el:#root ，
数据：{
名称：“尚硅谷”
},
方法：{
showInfo1(事件){
/* console . log(event . target . innerhtml)
Console.log(this) //这里是vm*/
提醒(“你好同学1”)
},
showInfo2(数字，a){
/* console . log(event . target . innerhtml)
Console.log(this) //这里是vm*/
Alert(同学们好2 )
console.log(数字，a)
}
}
})
/脚本
总结
关于Vue新手指南的环境建设和介绍这篇文章到此为止。更多关于Vue环境建设和介绍的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。