Vue的使用
mvc
model view controller
mvvm
m=>model v=>view 双向数据绑定
数据在视图呈现:在表单里用v-model,在表单外用{{}},也可以用v-text
el:".app" 也可以写成 .$mount('.app')
<body>
<div class="app">
<input type="text" v-model="one">+<input type="text" v-model="two">=<span>{{one*1+two*1}}</span><span v-text="one"></span>
</div>
</body>
</html>
<script>
new Vue({ //启动vue
el:".app", //element,锁定vue作用的范围
data:{ //指定数据,json格式
one:0,
two:0
},
watch:{ //手动监控某一数据的变化
con(one){
if(one){
this.message=""
}
}
},
methods:{ //操作逻辑,放的是方法
result1(){
console.log("result1")
if(this.one>10){
return this.one*1-this.two*1
}else{
return this.one*1+this.two*1
}
}
},
computed:({ //动态的数据
result2(){
console.log("result2")
if(this.one>10){
return this.one*1+this.two*1
}else{
return this.one*1-this.two*1
}
}
})
})
</script>
指令
{{}}
模板引擎
<span>{{msg}}</span>
v-text
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html
更新元素的内容
v-model
完成双向数据绑定 (只能用在表单)
<input type="text" id="text" v-model="con" @keydown.13="add">
v-for
模板中循环
<tr v-for="item in values">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
</tr>
v-if v-else
模板中的判断
<div v-if="flag==true"></div>
<div v-else></div>
v-show
根据表达式之真假值，切换元素的 display CSS 属性。
<div v-show="datas.length==0">没有内容</div>
v-on: => @
<input type="text" id="text" v-model="con" @keydown.13="add">
v-bind => :
<button type="button" class="btn btn-info" @click="changefn('all')" :style="{color:(changestate=='all'?'red':'#fff')}">全部</button>
组件化开发
一个组件里应该有完整的数据,完整的逻辑,完整的结构
<body>
<div class="box">
<car :datas="[{con:1},{con:2},{con:3}]"></car>
</div>
</body>
</html>
<script>
Vue.component("car",{
props:["datas"],
"template":`
<ul>
<li v-for="item in datas">{{item.con}}</li>
</ul>
`
// data:function () {
// return{
// datas:[{con:1},{con:2},{con:3},{con:4}]
// }
// }
})
new Vue({
el:".box",
})
</script>
构建vue2.0目录
vue -V 查看vue的版本 (热加载)
sudo npm install -g vue-cli 下载
vue init webpack aaaa 创建 vue基于webpack
y n n n y
src .vue就是一个完整的组件
cd aaaa
npm run serve
sudo npm uninstall -g vue-cli 卸载
构建vue3.0目录
sudo npm install -g @vue/cli 安装
vue create bbbb
手动创建
必选的:babel,Vuex,route
y n
cd bbbb
npm run serve
vue路由
-
引入vue.js vue-route.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -
组件的制作
const Foo=Vue.component("Foo",{
template: `
<div @click="change">{{con}}</div>
`,
data:function () {
return{
con:"ljhblkbkjkj"
}
},
methods:{
change(){
this.con="123654788"
}
}
})
const Bar = { template: '<div>bar</div>' } -
建立路由
const router = new VueRouter({
routes:[
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
] -
声明vue 把路由放进vue中
const app = new Vue({
el:"#app",
router:router
})
一、逻辑在服务器上
-
优点：首页加载速度快，业务逻辑清晰，工作量少
-
缺点：用户体验差，服务器压力大，不利于协同工作
二、逻辑在前端（ajax）
-
优点：用户体验佳，流畅，减轻服务器压力，有利于协同工作
-
缺点：首页加载慢，业务逻辑不清晰，工作量大
