Vue第一章
一、什么是Vue.js?
来自官网的解释:
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
我觉得,说白了就是基于js的一个前端框架,,至于什么是渐进式框架,我是不懂,也希望有人能解答下。
vue快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}<p/>
<h4>{{name}}</h4>
</div>
<div> <!--没有交给Vue实例管理-->
<p>{{message}}</p>
<h4>{{name}}</h4>
</div>
<script>
//声明式编程
//Es6: let(变量) const(常量)
let app = new Vue({
el: '#app', // 通过id,用于挂载要管理的元素
data: { //定义数据
message: '吖吖',
name: '你好,王辰'
}
})
</script>
</body>
</html>
这种方式可以做到,数据和界面完全分离
创建Vue实例,传入的是对象,{}中包含了el,data等属性,el决定了Vue实例要管理的元素,data是可以展示给页面的数据,数据可以来自网络,或者服务器加载
v-for遍历
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
movies: ['qwe','qwe','qwe','qwe']
}
})
</script>
一个简单的计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
当前计数:{{counter}}
<button v-on:click="ch(1)">+</button>
<button @click="ch(-1)">-</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
ch: function (num) {
console.log("ch 被执行了")
this.counter = this.counter + num
}
}
})
</script>
</body>
</html>
methods: 用于zaivue中定义方法,中引用data中的属性,需要加上this. 这里面有一个proxy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h4>{{message}}</h4><br>
<h4 v-once>{{message}}</h4><br> <!--表示该指令只渲染一次,不会随着数据变化而变化-->
<h4 v-html="url"></h4><br>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
name: 'd',
url: '<a href="https://www.cnblogs.com/DF-fzh/p/5979093.html">博客园</a>'
},
methods: {
gg: function () {
}
}
})
</script>
</body>
</html>
为了让用户看不到 {{message}},使其更有好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h4 v-cloak> {{message}}</h4>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function (){
const app = new Vue({
el: '#app',
data: {
message: '你好'
},
methods: {
gg: function () {
}
}
})
},3000)
</script>
</body>
</html>
使用v-cloak指令, 当浏览器从上往下解析时,先执行v-cloak指令,的样式,然后执行script标签的vue代码后,会删除v-cloak指令.恢复样式
v-bind 动态绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<img v-bind:src="imgUrl" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
imgUrl: 'https://imgconvert.csdnimg.cn/aHR0cHM6Ly9wMy10dC5ieXRlaW1nLmNvbS9vcmlnaW4vcGdjLWltYWdlL2JjN2E0MWE0MWUyMTQxMTE4ODg2NTA3M2UzNjJlY2U1?x-oss-process=image/format,png'
},
methods: {
gg: function () {
}
}
})
</script>
</body>
</html>
v-bind的语法糖写法
<div id="app">
{{message}}
<img :src="imgUrl" alt="">
<a :href="a">b</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
imgUrl: 'https://imgconvert.csdnimg.cn/aHR0cHM6Ly9wMy10dC5ieXRlaW1nLmNvbS9vcmlnaW4vcGdjLWltYWdlL2JjN2E0MWE0MWUyMTQxMTE4ODg2NTA3M2UzNjJlY2U1?x-oss-process=image/format,png'
,a: 'https://www.cnblogs.com/isme-zjh/p/12018141.html'
},
methods: {
gg: function () {
}
}
})
</script>
v-model 来实现数据的双向绑定
