vue相关知识,vue要掌握哪些知识?
本文主要详细介绍了Vue的基础知识。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.VUE基础知识VUE 1.1 vue 1.2插值语法1.3v-bind(单向绑定)1.4v-model(双向绑定)1.4 . 1V-model与v-bind的区别1.4.2v-model简单小例子1.4.3v-model集合形式案例1.5理解MVV
1. Vue的基本知识
1.1 Vue的使用
可以导入Vue文件，也可以通过CDN导入。要想让Vue工作，必须创建一个Vue的实例对象，而配置对象在真实开发中只有一个Vue的实例，而且是和组件一起使用的。
1.2 插值语法
差异
氕
你好！{ { name } } { { date . now()} } { { address } }
/h1
/div
脚本
Vue . config . production tip=false//防止Vue在生成时自动生成提示。
//创建一个Vue实例
新Vue({
El:#root ，//el用于指定当前Vue实例服务于哪个容器，值通常为css选择器字符串。
Data:{ //data用于存储数据。数据由el指定的容器使用。我们暂且把值写成一个对象。
名称：“树”，
地址：“中国”
}
})
/脚本
注意点：
1.{ {xxx}}这里的xxx是一个js表达式，它会自动读取数据中的所有属性。
2.一旦数据中的数据发生变化，页面上有数据的地方会自动更新。
3.插值语法的作用：用于解析标签体的内容，即起始标签和结束标签之间的内容。例如，h1 xxx /h1 xxx是标签主体。
4.一个js表达式要区分什么？js代码是什么？
1.什么是js表达式？
表达式可以产生值或返回值。
(1) a=1
(2) a b
(3) Date.now()函数
(4) x=Y？1 : 2
2.js代码是什么？(声明)
(1) if(){}
(2) for(){}
Js表达式是一种特殊的js代码。
1.3 v-bind（单向绑定）
指令语法有很多种，下面的例子只是v-bind中的一种：===可以缩写为：
加上这条指令后，“”中的内容会变成js表达式，而不是字符串(这个知识点很重要，后面很多地方都会用到)
这个方法是解析标签的属性，指令非常强大，可以解析标签(比如解析标签体、标签属性、绑定事件)。
div class=wrapper
嗨，h1！{{name}}/h1
整点
A :href=school.url 点击进入{{school.name}}/a。
A-bind: href= school.url 单击以进入{{school.name}}/a
/div
脚本
Vue.config.productionTip=false
新Vue({
艾尔：。包装，
数据：{
名称：“树”，
学校：{
姓名：“哔哩哔哩”，
网址： https://www.bilibili.com/
}
}
})
/脚本
1.4 v-model（双向绑定）
1.4.1 v-model和v-bind的区别
v-bind(单项绑定)：数据只能从data流向页面v-model(双向绑定)：不仅数据从data流向页面，而且可以从页面流向data双向绑定一般用在表单类元素上(input，select，包含value属性值)。如果在类似复选框的类型中没有值，v-model/ v-bind 传boolearn值可以控制类型div class=wrapper 的状态
！-普通写作-
！-单一数据绑定：input type= text v-bind:value= name br
双向数据绑定：输入类型= text v-model: value= name-
！-简单的写作-
单一数据绑定：输入类型= text :值= name br
双向数据绑定：输入类型=text v-model=name
/div
脚本
Vue.config.productionTip=false
新Vue({
艾尔：。包装，
数据：{
姓名：“你好”
}
})
/脚本
1.4.2 v-model 简单小例子
div class=root
输入类型=text v-model=message
p{{message}}/p
/div
脚本
Vue . config . production tip=false//防止Vue在生成时自动生成提示。
新Vue({
艾尔：。根，
数据：{
留言：‘你好！Vue
}
})
/脚本
1.4.3 v-model 收集表单案例
1.v-model的三个修饰符：
V-model.trim:去掉前后空格v-model.number:将接收到的数据转换成数字类型v-model.lazy:表示失去焦点时接收数据。2.V-model收集的值就是值。
当输入类型为radio时，我们需要手动配置一个value值。当输入类型为checkbox时，它返回一个布尔值。是否配置value值视情况而定。请记住，如果有多个集合，属性值应该是一个空数组div id=root
form @submit.prevent=demo ！-点击按钮时，会有一个默认行为提交信息并刷新页面-
！-v-model.trim是指去掉前后空间-
帐号：input type= text v-model . trim= userinfo . account brbr
密码：输入类型= password v-model= userinfo . password brbr
！-number的输入类型是限制用户的输入，而v-model.number是将接收到的数据转换成数字类型。两者一起使用-
age:input type= number v-model . number= userinfo . age brbr
性别：
！-对于单个选项，我们使用相同的名称来表示它们是一个组-
男性输入type= radio v-model= userinfo . sex name= sex value= male
女性输入type= radio v-model= userinfo . sex name= sex value= female brbr
爱好：
input= checkbox v-model= userinfo . hobby value=打篮球打篮球
type= checkbox v-model= userinfo . hobby value= knock code 敲码
type= checkbox v-model= userinfo . hobby value=干米干米
芭芭拉
校园：
select v-model= userinfo . address
Option= 请选择区域/选项。
Option=北京北京/option
Option=上海上海/option
Option=广州广州/option
选项=深圳深圳/选项
/选择brbr
！-v-model.lazy:表示在焦点丢失时接收数据-
其他信息：textarea cols= 20 rows= 3 v-model . lazy= userinfo . other /textarea
芭芭拉
input= checkbox v-model= userinfo . Agree 同意并接受
a href= # style= text-decoration:none；《用户协议》 /a
芭芭拉
提交按钮/按钮
/表单
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
用户信息：{
帐户：，
密码：，
年龄：，
性别：，
爱好：[]，
地址：，
其他：，
同意：“”
},
},
方法：{
演示(){
console . log(JSON . stringify(this . userinfo))；
}
},
})
/脚本
1.5 理解MVVM
M
模型):数据中的数据
V
视图：模板代码(非静态页面)
伏特计
视图模型：视图模型(Vue的实例)
对MVVM的理解：
MVVM本质上是一个模型-视图-视图模型。Model指的是后端交付的数据，view view指的是你看到的页面。Viewmodel viewModel是mvvm模型的核心，是视图和模型之间的桥梁。它有两个方向：
将模型转化成视图，也就是把后端传过来的数据转换成你看到的页面。实现方法是：数据绑定
将视图转化成模型，也就是把你看到的页面转换成后端数据。实现方法是：DOM 事件监听
两个方向都实现了，我们称之为数据的双向绑定。
1.6 Object.defineProperty(重要)
对象.定义属性
-第一个参数：指定的对象
-第二个参数：要添加的属性的名称
-第三个参数：配置项
脚本
让数字=20
vue . config . production tip=false//阻止默认提示
var person={
姓名：“杰克”，
地址：“hgs”
}
Object.defineProperty(person， age ，{
//值：18，
//enumeratable:true，控制属性是否可以枚举。默认值为false。
//writeable: true，控制属性是否可以修改，默认值为false。
//configurable:true控制属性是否可以删除，默认值为fasle。
//以上是基本配置，下面的get和set很重要。
//当有人读取person的age属性时，会调用get函数(getter)，返回值是age的值
get(){
Console.log(读取成功！);
退货数量
},
//当有人修改Person的age属性时，会调用set函数(setter)，将修改后的值作为value获取
设置(值){
Console.log(修改值：值)；
数字=值
}
})
1.7 数据代理（重要）
自我对于数据代理的理解：
在创建vm实例对象的时候，会给它添加很多属性，它会把data的数据转移到vm下的_data中，使用Object.defineProperty，也就是数据代理到vm通过getter和setter来读取/修改。这样做的目的是方便地直接{{name}}，而不是{{_data.name}}编写代码。vue的数据代理通过vm对象充当数据对象属性的代理，配置一个getter和setter，通过getter和setter操作数据中的属性div id=root。
h1你好！{{_data.name}}/h1
h1你好！{{_data.address}}/h1
h1你好！{{name}}/h1
h1你好！{{address}}/h1
/div
脚本
vue . config . production tip=false//阻止默认提示
var vm=new Vue({
el: #root ，
数据：{
姓名：“杰克”，
地址：“中国”
}
})
/脚本
总结
这就是我们今天要讲的内容。本文只是简单介绍一下Vue的一些基础知识。希望对大家有帮助！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。