Vue 简介
Vue 是一套用来动态构建用户界面的渐进式JavaScript框架
○
构建用户界面：把数据通过某种办法变成用户界面
○
渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件
Vue 的特点
- 遵循MVVM模式
- 编码简洁，体积小，运行效率高，适合移动/PC端开发
- 它本身只关注 UI，可以引入其它第三方库开发项目
- 采用组件化模式，提高代码复用率、且让代码更好维护
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
初识Vue
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
vue启动时出现的提示,Vue.config.productionTip可以阻止启动提示
Vue.config.productionTip = false;
我们创建容器需要绑定id值
注：搭建脚手架（vue-cli）后只能出现一个容器
{{值}} 插值
<div id="app">
<!-- {{}} 插值-->
{{message}}
</div>
var vm = new Vue({
// 1.data:{}对象式
// 2.data(){return{}}函数式
// 注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式
// data:{
// abc:"我是王五"
// },
// data:function(){
// return{
// abc:"我是赵六，今天学习vue"
// }
// },
data() {
return {
abc:"我是赵六",
num:"https://v2.cn.vuejs.org/v2/guide/instance.html"
}
},
})
vm.$mount("#ips");
// 创建一个新的实例化Vue
var vms = new Vue({
// el绑定创建的容器
el:".box",
// data用于定义变量的集合,通常与插值提供
data:{
aaa:"第一天学习Vue,class",
a:"我是张三",
b:"我今天学习vue",
c:10,
d:20,
e:[1,2,3],
f:[4,5,6],
func(a){
return a;
}
}
})
var app = new Vue({
// el绑定创建的容器
el:"#app",
data:{
message:"Hello Word"
}
})
methods存放函数方法
// 注：尽量不要使用箭头函数，否则拿取不到data的数据
// 注：函数名称不要与变量名称一致
methods: {
btns(user){
if(user==1){
this.cla = "box1";
}else{
this.cla = "box2";
}
},
// 点击这个访问百度
func(){
console.log(11111111);
},
// 点击这个访问vue官网
func2:function(){
console.log(222222222);
},
func3(user){
console.log(this);
console.log(this.userName);
},
},
})
vm.$mount("#app");
模板语法
Vue模板语法包括两大类
1
插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域
2
指令语法
**功能：**用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：或简写为，xxx 同样要写 js 表达式，可以直接读取到 data 中的所有属性
备注：Vue中有很多的指令，且形式都是 v-xxx，此处只是拿v-bind举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>插值语法</h2>
<h4>你好，{{ name }}</h4>
<hr />
<h2>指令语法</h2>
<a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看{{ tencent.name }}1</a>
<a :href="tencent.url" x="hello">点我去看{{ tencent.name }}2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: 'jack',
tencent: {
name: '开端',
url: 'https://v.qq.com/x/cover/mzc00200mp8vo9b/n0041aa087e.html',
}
}
})
</script>
</html>
-绑定事件 v-on: == @ v-on:事件类型 事件类型一定不要加on
-
v-for 遍历数组，对象，字符串，指定次数
-
v-if 做判断，隐藏(是否存在)
-
v-show 隐藏(是否展示) 默认隐藏
-
v-bind:或:绑定属性名，单向数据绑定
-
v-bind:单向数据绑定：只能由data中的数据流向页面
v-model双向数据绑定：可以由data中的数据流向页面，也可以由页面(用户输入)流向data -
v-if判断和v-show 显示隐藏
-
v-else和v-else-if判断
使用v-else,v-else-if前必须有v-if -
v-text和v-html，插值区别
.v-text和v-html相同点：都会覆盖文本
不同点：v-text只读取文本，v-html读取标签 -
插值添加值：
注：不要在用提交时使用v-html,不要在动态渲染时时使用v-html区别：对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素)
1.在vue2中，v-for优先级比v-if高
在vue3中，v-if优先级比v-for高
2. v-if和v-for不能同时使用
3、同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环**不要设置值的指令** -
v-else,v-cloak,v-once，v-pre -->
-
v-once设置了以后，更改值不会发生改变，优化性能
-
v-pre设置了以后，会让插值和指令失效
1
解决屏幕闪烁的问题，第一在标签上添加v-cloak,第二需要css设置上面样式
[v-cloak]{
display: none;
}
/* 解决屏幕闪烁的问题，第一在标签上添加v-cloak,第二需要设置上面样式 */
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
