Vue笔记
- vue官网：cn.vuejs.org
day01
1.(掌握)vue安装和初步体验vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
/*
// 需要编译器
new Vue({
template: '<div>{
{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
*/
ES6中: let (定义变量) / const(定义常量)
<div id="app">
<button @click="add()">添加</button>
插值表达式: {
{
num}}
双向绑定:v-model
<input type="text" v-model="msg"/>
</div>
new Vue({
el:"#app",
data:{
num:0 ,
msg:"hello vue"
},
methods:{
add(){
this.num ++;
}
}
});
vue 渲染式框架，数据和视图进行分离.
MVVM模式
<!-- vue体验：计数器-->
<body>
<div id="app">
<input type="text" v-model="msg"/>
{
{msg}}
<br/><hr color="red"/>
当前技术:{
{num}}
<button @click="add()">+</button>
<button @click="subtraction()">-</button>
</div>
<script> new Vue({
el:"#app", data:{
msg:"hello vue" ,num:0 }, methods:{
add(){
this.num++; }, subtraction(){
this.num--; } } }) </script>
</body>
2.(理解)vue的options选项
参考官方API文档:https://cn.vuejs.org/v2/api/#el
<body>
<div id="app">
<input type="text" v-model="msg"/>
{
{msg}}
<br/><hr color="red"/>
当前技术:{
{num}}
<button @click="add()">+</button>
<button @click="subtraction()">-</button>
</div>
<script> new Vue({
el:"#app", data:{
msg:"hello vue" ,num:0 }, methods:{
add(){
this.num++; }, subtraction(){
this.num--; } } }) </script>
</body>
el、data、methods表示vue的options。其他的选项参考官方api学习文档
3.(了解)vue生命周期
生命周期:created 页面加载的时候调用，但是没有渲染DOM节点.mounted 页面加载的时候调用。这个时候DOM已经渲染完了。
4.(掌握)Vue-指令
4.1 插值表达式
mustache语法就是双大括号{,即插值语法;插值表达式里面做一些简单的运算.复杂的运算使用
{msg}}computed计算属性.
<body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
{
{age>18?"成年":"未成年"}}
<hr color="red"/>
{
{msg.split("-")}}
</div>
<script> new Vue({
el:"#app", data:{
age:23, msg:"hello-vue" }, methods:{
} }) </script>
</body>
效果：
需要注意：在插值表达式中不能写js语句。比如
{
{var a = 10 }}
4.2 v-once指令
只渲染元素和组件一次;不需要表达式, 直接将指令写在开始标签中即可
<body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
<button @click="change()">改变msg内容</button>
{
{msg}}
<hr color="red"/>
<p v-once>{
{msg}}</p>
</div>
<script> new Vue({
el:"#app", data:{
msg:"hello-vue", num:1 }, methods:{
change(){
this.num++; this.msg="hello-vue 的v-once指令"+(this.num); } } }) </script>
</body>
效果：
4.3 v-html 和v-text指令
渲染文本里面的内容。但是需要注意v-html可以渲染内容里面的js代码，容易造成XSS脚本共计.
<div id="app">
{
{url}}
<hr/>
<h1 v-html="url"></h1>
</div>
<script> new Vue({
el:"#app", data:{
url:"<a href='http://www.baidu.com'>百度</a>" } }) </script>
4.4 v-pre指令
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。跳过大量没有指令的节点会加快编译。
<span v-pre>{
{ this will not be compiled }}</span>
就会直接显示
{
{this whill not be compiled}}
4.5 v-cloak
防止{
{}}进行解析闪动。cloak 中文意思表示斗篷.
<style> [v-cloak] {
display: none; } </style>
<div v-cloak>
{
{ message }}
</div>
4.6 v-bind 指令*****
v-bind 绑定标签的属性。是标签的属性。可以是绑定 class、style 等都可以;
v-bind 可以简写为冒号”:”
1 .绑定基本属性
<div id="app">
<img :src="url" />
</div>
<script> new Vue({
el:"#app", data:{
url:"http://192.168.0.150/fasfasdfafsd.png" } }) </script>
2.绑定class对象语法
- 对象语法
:class=“{类名:布尔值}” ,有布尔值觉得是否绑定类名.布尔值的数据来源data。
所谓对象语法就是说 :class=“{}”,在json中使用{}表示对象的。
<style> .ative{
color:red; } </style>
<div id="app">
<p :class="{active:isactive}">
hello vue
</p>
</div>
<script> new Vue({
el:"#app", data:{
isactive:true } }) </script>
3.绑定style
绑定style的对象语法:
：style = “{key(属性名,样式的名字):value(属性值)”
<div id="app">
<div v-bind:style="{
color: redColor, fontSize: font18}">
文本内容
</div>
</div>
<script src="./vue.js"></script>
<script> var vm = new Vue({
el: '#app', data: {
redColor: 'red', font18: '18px' } }); </script>
xxxx
color 这里没有加单引号， value的值使用单引号。
在vue中key可以不用加单引号，但是value如果不加单引号，vue会把他当着是一个变量来处理.如果加上单引号转成样式的时候是没有单引号的。
.titil{
font-size:50px,
color:red;
}
4.7 v-for指令[循环指令]
循环指令.
- 遍历数组.
<div id="app">
<ul>
<li v-for="(item,index) in boos">
{
{index}}------{
{item}}
</li>
</ul>
</div>
<script> new Vue({
el:"#app", data:{
boos:["Java","C#","python"] } }) </script>
- 遍历对象。
<div id="app">
</div>
<script> new Vue({
el:"#app", data:{
} }) </script>
5.（掌握）计算属性
计算属性：computed，计算属性作为vue实例选项options之一。
<div id="app">
<h2>
{
{fullName}}
</h2>
</div>
<style> new Vue({
el:'#app', data:{
firstName:"hello", lastName:'vuejs' }, computed:{
fullName(){
return this.firstName+' '+this.lastName; } } }) </style>
- 插值表达式里面还可以写方法
<div id='app'> { {getFullName()}} </div> <script> new Vue({ el:"#app", methods:{ getFullName(){ return "hello"+" "+"vuejs"; } } }) </script>
- 计算属性里面的方法必须要有返回值
<div id='app'>
</div>
<script> new Vue({
el:'#app', }) </script>
- ES6语法之循环
<div id='app'> { {totalPrice}} </div> <script> new Vue({ el:'#app', data:{ books:[ { id:110,name:"unix编程艺术",price:119}, { id:111,name:"代码大全",price:105}, { id:112,name:"深入理解计算机原理",price:98} ] }, computed:{ totalPrice(){ let totalprice=0; for(let i in this.books){ totalprice +=this.books[i].price } return totalprice; } } }) /* //循环方式一： for(let i in this.books){ this.books[i] } //循环方式二： for(let book of this.books){ //book表示里面的一个对象 } */ </script>
day02
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/100735.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
