Vue框架
是一套用于构建用户界面的渐进式框架
Vue 的核心库只关注视图层,
是一个数据驱动的MVVM框架
Model （data) //model层 数据放在data里
View ( template) //视图层渲染数据
ViewModel(vm) //当数据变化的时候，视图自动更新（数据驱动）
搭建vue环境
①新建一个文件夹（code） 打开cmd npm init -y
②cnpm i vue --save
③node_modules--->vue---->dist---->vue.js(复制)---->返回文件夹（code）新建一个js文件夹---->将vue.js粘贴在js文件夹中
④新建html文件 引入 <script src='js/vue.js'></script>
虚拟dom(内存里的dom结构) //并没有在div中写dom结构 而是在vue中进行操作再将数据渲染到页面上，在渲染之前会对dom中原有的数据和vue中的数据进行比较，更新有差异的数据
v-html //渲染html标签
v-bind //(重要) 绑定表达式到标签的属性上 可简写为“：” （数据变化视图自动更新，视图变化了数据不会变化）
//v-bind 可以简写为“：”
1）v-bind:font-size: 12pt; color: rgb(45, 79, 201); font-family: "Source Sans Pro"; font-weight: bold;">" // 绑定style
v-model //（重要) 数据变化 视图会变化，视图变化，数据也会变化(双向绑定)
修饰符：
1）.number 将数据类型转换为number类型
2）.lazy 失去焦点是才发生改变
3 ) .trim 去掉前后的空格
<input type='text' v-model.number.lazy='a'> //把字符串转换成数值型进行加减乘除运算
$mount //紧跟在data后面指定管理的元素 相当于 el的作用（不常用）
var vm = new Vue({
data:{
mag:"aaaa"
}.$mount("#box")
})
v-if // true 才渲染dom元素 false不渲染 不适合频繁切换
v-show //当为true的时候显示设定的 style 当为false的时候
<body>
<div id='box'>
<input type="checkbox" v-model='flag' />
<p v-if='flag'>hahaha</p>
<p v-show='flag'>hello</p> //true style false
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
flag:true
}
})
</script>
</body>
经典:todolist
v-for="(item,index) in list" v-bind:key="index" //for循环 遍历数组
v-on:事件="事件的处理函数" //可简写为@符号
事件处理函数放在methods 里面
v-on:keyup.enter // 判断回车键
hello .js
<script src='js/vue.js'></script>
</head>
<body>
<div id='box'>
{{msg}} //不能直接解析标签元素
<div v-html='msg'></div> //v-html可以解析标签
<div v-bind:title='two'>aaasdasda</div> //把title绑定到two变量上
<input type="checkbox" v-bind:checked='flag' /> //把checked绑定到flag变量上
<input type="checkbox" v-model='flag' /> //数据变化 视图会变化，视图变化，数据也会变化(双向绑定)
<input type='text' v-model='two' maxlength="20" />还可以输入{{20-two.length}} //maxlength最大长度 效果：在输入框中输入内容 {{two}}的内容会跟着改变
</div>
<script type="text/javascript">
var vm=new Vue({ //实例化
el:'#box',//管理元素(标签)的
data:{ // 存放数据的
msg:'<h1>hello</h1>',
two:'world',
flag:true
},
//template:'<p>{{two}}</p>' //模板 {{差值表达式}} 在差值表达式中可以任意写变量 如果指定了模板就用模板里面的元素，如果没有指定模板就用el中管理的元素
})
</script>
</body>
</html>
ysb.js 调色板
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--<input type="color" v-model='bg' /> //第一种方法
<div v-bind:>aaaaaa</div>
</div>-->
<input type="number" v-model='width' /> //第二种方法
<input type="number" v-model='height' />
<input type='range' min='0' max='255' v-model='r'>
<input type='range' min='0' max='255' v-model='g'>
<input type='range' min='0' max='255' v-model='b'>
<div v-bind:>aaaaaa</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
200,
height:300,
r:0,
g:0,
b:0,
bg:'#ccc'
}
})
</script>
</body>
todolist.html
<body>
<div id="box">
<input type="text" v-model='msg' v-on:keyup.enter='add' />
<ul>
<li v-for='(item,index) in todos' v-bind:key='index'>{{index}} {{item.text}}
<button v-on:click='del(index)'></button>
</li>//循环 todos数组里的每一项还有下标 v-bind:key='index'为了防止编译器报错
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'',
todos:[
{text:'hahaha'},
{text:'aaaa'},
{text:'fffffff'}
]
},
methods:{//方法要写在methods中
add(){
this.todos.push({text:this.msg});//将输入的字符串添加进todos
this.msg='' //添加后清空input框
},del(index){
this.todos.splice(index,i)
}
}
})
</script>
</body>
doublefor.html
<body>
<div id="box">
<ul>
<li v-for='n in 9'>
<span v-for='m in n'>{{m}}*{{n}}={{m*n}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
}
})
</script>
</body>
v-forObject.html 循环遍历对象{}
<body>
<div id="box">
<ul>
<li v-for='(value,key,index) in per'> <!--值 键 下标 参数顺序是固定的-->
{{index}}---->{{key}}:{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
per:{
id:'sss',
name:'zs',
age:22
}
}
})
</script>
</body>