怎么搭建vue开发环境

　　介绍

这篇文章主要讲解了“怎么搭建vue开发环境”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”怎么搭建vue开发环境”吧!

<编辑类="目录">目录 <李>

初始vue

<李>

搭建vue开发环境

<李>

创建vue实例

<李>

vue模板语法

<李>

vue数据绑定

<李>

el-data的两种写法

<李>

MVVM模型

<李>

vue数据代理

<李>

vue中的事件处理


<强> vue官网:https://cn.vuejs.org

怎么搭建vue开发环境

初始vue

什么是vue ?

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

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

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

复杂使用:可以引入各式各样的vue插件

怎么搭建vue开发环境

vue的特点:

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

2,声明式编码:无需直接操作DOM,提高开发效率

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

搭建vue开发环境

1,下载vue。js

怎么搭建vue开发环境

2,创建项目并导入想法

怎么搭建vue开发环境

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

并使用Vue.js devtools

怎么搭建vue开发环境

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

以上vue环境就搭建好啦

创建vue实例

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

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

3根容器里的代码被称为[vue模板)

, vue实例和容器是一一对应的

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

, <强> { {xxx}}中的xxx要写js表达式,且xxx可以自动读取到数据中的所有属性

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

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

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

(1) (2) + b演示(1)(3)(4)x===y ?”一个# 39;:“b # 39;

2, js代码(语句)

(1)如果(){}(2)(){}

& lt; html  lang=癳n"比; 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title>初始Vue 　　,,,& lt; !——引入Vue开发版——比; 　　& lt;才能script 类型=拔谋?javascript", src=? ./js/vue.js"祝辞& lt;/script> 　　& lt;/head> 　　& lt; body> 　　 　　& lt; !——准备容器,为Vue提供模板,把Vue的成果展示——比; 　　& lt; div  id=皉oot"祝辞 　　,,,& lt; !——{{js表达式}},,插值语法——比; 　　,,,& lt; h2>你好! {{name.toUpperCase()}},{{地址}}& lt;/h2> 　　& lt;/div> 　　,,,& lt; script 类型=拔谋?javascript"比; 　　,,,,,,,Vue.config.productionTip=false //以阻止,vue 在启动时生成生产提示。 　　 　　,,,,,,//创建vue实例 　　,,,,,,,new , Vue ({ 　　,,,,,,,//el用于当前Vue实例为哪个容器服务,值通常为css选择器字符串 　　,,,,,,,,,,,el: & # 39; #根# 39;,,, 　　,,,,,,,,,,,//数据中用于存储数据,数据供el所指定的容器去使用,值暂时写成一个对象。 　　,,,,,,,,,,,数据:{, 　　,,,,,,,,,,,,,,,的名字:“南风知我意“, 　　,,,,,,,,,,,,,,,地址:“上海“; 　　,,,,,,,,,,,} 　　,,,,,,,}) 　　,,,& lt;/script> 　　& lt;/body> 　　& lt;/html>

运行结果:

怎么搭建vue开发环境

vue模板语法

vue模板语法有两大类

1,插值语法:

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

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

2,指令语法:

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

怎么搭建vue开发环境