"Vue.js 是一个轻量级的渐进式JavaScript框架，以其易用、灵活和高效著称，尤其适合数据绑定和单页面应用。在多页面应用中，每个URL对应一个HTML页面，而在单页面应用中，多个URL共享一个HTML页面。Vue不支持IE8及以下版本。数据绑定使用模板语法{{}
官网：
https://cn.vuejs.org/ 属性 ---- 变量 ---- 模型 方法 ---- 函数
1.介绍
1.渐进式 JavaScript 框架：主张最少。
2.优点：易用 灵活 高效 指令系统 SPA(单页面应用) MVVM
多页面应用：1个url 对应一个html页面，多个url对应多个html
单页面应用：多个url对应1个html页面
3.兼容：Vue
不支持 IE8 及以下版本。
2.体验vue
大量的数据增删改查的操作 我们就要采用vue
如果你的项目有大量的DOM节点操作或者动画(show hide slideDown slideUp….) ,建议使用jq
3.学习
1.el 挂载点
1.el可以使用css的所有选择器，但是建议使用id(如果有两个div，然后el:div, 这样只会挂载到第一个div上) 只能挂载到一个节点上
2.不要将vue挂载到html或者body 回出现
这个错误提示
这个错误提示
3.一个new vue中只能有一个el
2.data 属性
new Vue({
data:{
a:10
}
})
3.methods 方法
new Vue({
methods:{
show:function(){},
hide:function(){},
}
})
4.数据绑定
非表单元素：
div span ul li h1-h6 p ….
1.{{}} 模板语法 : 方便好用
但是不能解析标签，有可能会出现首屏闪屏问题。
双大括号里面的按照js解析输出，外面的按照原样输出、
闪屏就是当用户网络慢，然后加载不出vue.js的时候，页面上会出现很多的双大括号，但是有了网之后，会从双大括号变成正常的界面显示
<body>
<div id="app">
<h1>你好,{{name}}</h1> //还可以写成
<h1>{{“你好," + name}}</h1>
</div>
</body>
<script>
new Vue({ //Vue首字母必须大写
el:"#app", //以div为挂载点 #对应id,,点对应class,如果只是标签,则直接el:"div"
data:{
name:"王赛"
},
methods:{
show:function(){},
hide:function(){},
}
})
</script>
页面显示：你好，王赛
2.v-html ： 能解析标签
v-html里面的按照js解析输出，必须按照js的语法输出
当用户网络慢，然后加载不出vue.js的时候，页面会出现空白，但是有了网之后，会从空白变成正常的界面显示
<body>
<div id="app">
<h1 v-html="name"></h1>
<h2 v-html="'你好,'+ name"></h2>
</div>
</body>
<script>
new Vue({ //Vue首字母必须大写
el:"#app", //以div为挂载点 #对应id,,点对应class,如果只是标签,则直接el:"div"
data:{
name:"王赛"
},
methods:{
show:function(){},
hide:function(){},
}
})
</script>
页面显示： 王赛
你好,王赛
3.v-text ： 不方便，
不能解析标签。可以解决首屏出现闪屏问题
v-text里面的按照js解析输出，必须按照js的语法输出
<body>
<div id="app">
<h1 v-text="name"></h1>
<h2 v-text="'你好,'+ name"></h2>
</div>
</body>
<script>
new Vue({ //Vue首字母必须大写
el:"#app", //以div为挂载点 #对应id,,点对应class,如果只是标签,则直接el:"div"
data:{
name:"王赛"
},
methods:{
show:function(){},
hide:function(){},
}
})
</script>
表单元素:
Input textarea select-option ...
v-model 数据的双向绑定，只能绑定一个变量
<body>
//视图
<div>
<span>{{name}}</span>
<input type="text" v-model="name">
</div>
<script>
new Vue({
el:"div",
//模型
data:{
name:"王赛"
}
})
</script>
</body>
当页面显示完之后，如果在input的输入框内容重新输入了内容，那么span里面的内容也会跟着修改。 因为input的name属性被修改，那么根据数据的双向绑定原则，那么模型中data的name也会被修改，那么所有和data有关的属性都会被修改，除非重新刷新页面，不然初始值不会被改回来
5.MVVM模式（需要记忆）
M-model 模型 类似于机顶盒，机顶盒里有很多的数据，
V-view 视图 类似于电视机
VM-viewModel 视图模型 (控制器) 类似于遥控器
模型通过控制器决定了视图，视图可以通过控制器修改模型，视图模型是模型和视图之前的桥梁。 VM是vue自动生成的
适用：大量的数据增删改查的操作
在vue中也是先定义，后使用
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
