2. Vue - 初始
2024-09-07 12:48:11
一、vue简单介绍
1. vue定义
vue是一套用于构建用户界面的渐进式框架。vue被设计为可自底向上逐层应用，vue的核心只关注视图层；vue的特点是数据驱动视图，可直接修改数据，不用再手动编写js操作DOM。
2. vue引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3. vue创建
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 声明vue的作用域 -->
<div id="app"></div>
<!-- 创建vue实例 -->
<script>
let app = new Vue({
// 元素声明
el:'#app',
// 数据
data:{
content: "hello world",
},
// 计算属性
computed:{
totalScore: function () {
return this.python + this.linux + this.go;
}
},
// 事件,与v-on联动
methods:{
jump(){
this.num += 1;
}
},
// 侦听事件
watch: {
python: function (value, oldvalue) {
console.log(value, oldvalue)
}
},
// Vue路由
router: router,
// Vue局部组件
components: {
'my-header': header,
}
})
</script>
4. vue小实例
<body>
<div id="app">
<p>vue作者是{{ Author }}</p>
<p v-html="a"></p>
<hr>
<a v-bind:href="BaiduURL">百度</a>
<a :href="BaiduURL">百度</a>
<hr>
<!-- v-for -->
<ul>
<!-- v-for可设置索引，v-key有了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联 -->
<!-- v-key可保证更改数据时，不必再重新for循环，渲染 -->
<li v-for="(item, index) in fruit" v-bind:key="index">
<!-- 双向数据绑定，可输入值，改变数据 -->
<input type="number" v-model.number="item.num">
- {{ item.name }}
<span style="color: red" v-if="item.num == 0">卖完啦！</span>
<button v-on:click="add(index)">+1</button>
</li>
</ul>
<p>水果总数量是：{{ totalNum }}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
Author: 'Youyuxi',
a: '<a href="https://www.sogou.com/">sogou</a>',
fruit: [
{'num': 10, 'name': 'apple'},
{'num': 3, 'name': 'banana'},
{'num': 0, 'name': 'strawberry'},
{'num': 12, 'name': 'orange'},
],
BaiduURL: 'www.baidu.com'
},
<!-- 计算属性 -->
computed:{
totalNum: function () {
return this.fruit.reduce((x,y)=>{
return x+y.num;
}, 0)
}
},
<!-- 绑定事件 -->
methods: {
add(index){
this.fruit[index].num += 1;
}
}
});
</script>
</body>
最新文章
- sql 删除所有表
- Bug管理系统 BugFree
- C#中的BackgroundWorker控件+Delegate.Invoke （委托同步调用）
- Win7 64位 MinGW环境测试SDL2.0.3
- Java synchronized
- wamp环境下phpmyadmin拒绝访问
- sql 查询 – left join on
- Android Studio新建Jni工程
- HDU1166-敌兵布阵（线段树）
- JavaScript跨域实现
- mysql root给其它用户授权问题
- JSP学习笔记2
- 解决在管理wordpress时权限不足的问题
- 《zip命令》－linux命令五分钟系列之九
- [r]Setting up Django and your web server with uWSGI and nginx
- MVC中的模型注解
- Android,监控ContentProvider的数据改变
- http协言和web本质
- DevExpress Report的简单应用
- 手机自动化测试：Appium源码分析之跟踪代码分析七