vue
了解vue
vue是一套用于构建用户界面的前端框架
构建用户界面指的是 用vue往html页面填充数据
框架指的是 一套现成的解决方案 程序员只能遵守框架的规范 去编写自己的项目
在学习vue，就是在学习vue框架中规定的用法
我们学习vue 就是学习vue 的指令 ，组件，路由，Vuex，vue组件库等等
等我们掌握这些以后 就可以开发自己的vue项目了
vue的特性
数据驱动视图
在使用了vue的页面中 vue会监听数据的变化 从而自动重新渲染页面的结构
如下图
这样的优点是 在页面数据发生变化的时候 页面会自动重新渲染
但是需要注意的是 数据驱动视图是单向的数据绑定
双向数据绑定
我们通过 form表单采集数据据 然后通过Ajax提交数据
MVVM
MVVM 可以拆分为 M(mode数据源) ，V(view视图 也就是dom结构)，VW（viewmode 核心 代表的是vue的实例）
目前vue 2 是主流版本 vue 3 因为出的时间比较晚 目前在一点一点代替vue2
vue的基本使用
vue有两种使用方式
传统开发
一种是传统开发模式：基于html/css/js文件开发vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">{
{
username}}</div>
<script src="/vue.js"></script>
<script>
const vm = new Vue({
el: "#app", //el代表选中那个属性 相当于一个选择器
data: {
// data代表的是渲染在页面上的数据
username: "jokeree",
},
});
</script>
</body>
</html>
工程化开发
工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式
让一下
指令和过滤器
指令
指令指的是vue为开发者提供的模板语法
用于辅助程序员渲染页面的基本结构
vue的指令可以分为六种
1 内容渲染指令
v-text
案例如下
<div id="app">
<p v-text="username"></p>
</div>
<script src="/vue.js"></script>
<script>
const vm = new Vue({
el: "#app", //el代表选中那个属性 相当于一个选择器
data: {
// data代表的是渲染在页面上的数据
username: "biu",
},
});
</script>
这里需要注意的是 如果我们渲染的标签 原来就有文本 就会覆盖掉
如下
{ {}}语法 又名插值表达式
vue提供的{
{}}语法 类似于模板引擎 专门用来解决 v-text会覆盖默认文本内容的问题 这种{
{}}语法专业名称为插值表达式
英文名称 Mustache
<div id="app">
<p>姓名是{
{
username}}</p>
</div>
<script src="/vue.js"></script>
<script>
const vm = new Vue({
el: "#app", //el代表选中那个属性 相当于一个选择器
data: {
// data代表的是渲染在页面上的数据
username: "03biu",
},
});
</script>
发现内容没有被覆盖
v-html
v-html把值当做html解析
<div id="app">
<p>姓名是{
{
username}}</p>
<div v-html 
最低0.47元/天 解锁文章
1165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
