脚本框架的搭建
有两种方法,下面给出用包管理器创建的方法
给出这两个链接作为安装的参考
https://blog.csdn.net/han_chuang/article/details/105413151
https://blog.csdn.net/weixin_43844158/article/details/89788002
安装完成之后创建的项目目录大概就是这个样子
1.Vue的介绍
- 介绍:Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁
2.优点:上手速度快、功能强大,双向数据绑定,组件开发
2. 模块语法
1.v-html指令:要解析为html语言
<div {{name}}></div>
<script type="text/application">
var vm = new Vue({
el: "#box",
data: {
name: 'hello'
}
})
</script>
2.v-html指令:要解析为html语言
<div v-html="name"></div>
<script type="text/application">
var vm = new Vue({
el: "#box",
data: {
name: 'hello'
}
})
</script>
3.计算属性
<div v-html="">
{{name.substring(0,1).toUpperCase()+name.substring(1)}}
</div>
<script type="text/application">
var vm = new Vue({
el: "#box",
data: {
name: 'hello'
}
})
</script>
- 计算属性computed的应用
computed和methods的区别??*
computed会根据相关的依赖发生改变才会重新计算,如果没有改变会运行他的缓存
<div>
<p>我是计算属性computed {{changewordComputde}}</p>
<p>我是普通方法method {{changewordMethod()}}</p>
<p>我是计算属性computed {{changewordComputde}}</p>
<p>我是普通方法method {{changewordMethod()}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data: {
name: 'hello'
},
methods: {
changewordMethod: function() {
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
},
computed: {
changewordComputde: function() {
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
},
/* input监听input值的改变 */
var vm2 = new Vue({
el: "#box2",
data: {
price: 100,
number: 43,
sum: 0
},
// 监听的
/* watch:{
price.function(newvue){
this.sum=newvue*this.number
},
number.Function(){
this.sum=newvue*this.price
}
}, */
// computed是一个对象不是方法
computed:{
computedsum:function(){
return this.number*this.price
}
}
})
</script>
3.class与style的绑定
包括class样式和style样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.class与style的绑定</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h2>Class样式</h2>
<p class="default" :class="isShow?'aaa':'bbb'">class样式</p>
<!-- 对象的形式 -->
<p class="default" :class="{active:isShow,show:isShow}">对象的形式</p>
<!-- 数组的形式 -->
<p class="default" :class="['active','show']">数组的形式</p>
<h2>Style样式</h2>
<p class="default" :style="{background:color}">style</p>
<p class="default" :style="obj">style2</p>
<p class="default" :style="[obj2,obj3]">数组语法</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
name:"xiaoming",
isShow:true,
color:"red",
obj:{
background:"red",
fontSize:"30px"
},
obj2:{
background:"red"
},
obj3:{
fontSize:"30px"
}
}
})
</script>
</body>
</html>
4.条件渲染
<div id="box">
<p v-if="isCreated">我是if,执行了我</p>
<s v-else>我是else,执行了我</s>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
isCreated:true
}
})
</script>
5.列表渲染
- v-for
in
of - key
跟踪每个节点的身份,从而重用和重新排序现用的元素
理想的key值是每项都有的并且唯一的id值 - 数组的更新检测
filter push…
<div id="box">
<ul>
<!--v-for="(data,index) of datalist" 吧in换成of的效果也一样 -->
<!--key值最好不用设置为key值 -->
<li v-for="(data,index) in datalist" :key="index">
{{data}}
<!-- 在v-for第一个参数里面多加一个index,获取索引值 -->
{{index}}
</li>
{{data}}
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
datalist:["aaa","bbb","ccc","ddd"]
}
})
</script>
filter与v-bind实现双向数据绑定
<!--显示过滤结果 -->
<div id="box2">
<input type="text" v-model="mytext"/>
<ul>
<li v-for="data in computerdatalist">
{{data}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm2=new Vue({
el:"#box2",
data:{
datalist:["aaa","bbb","ccc","ddd"],
mytext:""
},
computed:{
computerdatalist:function(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>
6.单文件组件
用单文件框架的时候就需要用到脚手架,
4266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
