Vue概念快速整理
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 的学习难度曲线相对于React来说比较平缓,不过React的灵活性是超过Vue的
Vue的安装
以下推荐国外比较稳定的两个 CDN。
- Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
也可以采用npm以及命令行工具的方法穿件项目。Vue.js提供了vue-cli这样的工具用于生成单页项目程序。
npm install --global vue-cli //安装vue-cli
vue init webpack my-project //创建一个新的项目
这样创建完成的项目可以直接运行或者打包, 下面是直接运行,默认用本地的8080端口。
cd my-project
npm install
npm run dev
npm run build
使用npm方式创建的项目有完整的项目文件夹。
采用Vite构建项目,这是官方推荐的Vue3.0的构建方式。
模板语法
Vue使用了基于HTML的模板,可以用声明式的方法将DOM绑定到底层的Vue实例数据上。核心是允许采用简洁的模板语法声明式的将数据渲染金DOM系统中去。
两个非常重的声明语句缩写:
- v-bind的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
- v-on的缩写:
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
通过v-model进行数据双向绑定
用户输入
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
复选框控制CSS样式是否显示,属性中的值用v-bind绑定
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
用v-bind绑定数据的另外一个示例
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'Mytest data',
id : 1
}
})
</script>
用v-on绑定DOM的事件,演示了点击时的字符串反转功能
<a v-on:click="some-event">
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
filter过滤器
下面的{{ message | capitalize }}
用到了一个首字母大写的
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'display the message'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
过滤器可以串联,也可以接受参数
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2)}}
条件判断和循环
条件语句主要有v-if,v-else,v-else-if等,可以参考一般编程语言的if,else if 和 else的用法
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
循环语句 v-for
Vue3 的组件
Vue的组件可以通过这种层级式组合的方式进行逐步建立。下面是最简单的组件
<div id="app">
<test></test>
</div>
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 runoob的新全局组件
app.component('test', {
template: '<h1>自定义组件!</h1>'
})
app.mount('#app')
</script>
组件中加入Prop属性信息,通过title这个属性,就可以来渲染模板。
<div id="app">
<site-name title="Google"></site-namet>
<site-name title="Test"></site-namet>
<site-name title="Taobao"></site-name>
</div>
<script>
const app = Vue.createApp({})
app.component('site-name', {
props: ['title'],
template: `<h4>{{ title }}</h4>`
})
app.mount('#app')
</script>
Vue3的一些重要功能:
-
路由
Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用(single page web application,SPA)。在React中并没有原生的router,需要通过其他的第三方组件。Vue是通过一个单独的库vue-router提供路由的功能。
<script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"></script> <div id="app"> <h1>Hello App!</h1> <p> <!--使用 router-link 组件进行导航 --> <!--通过传递 `to` 来指定链接 --> <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签--> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>
-
混入
-
Ajax
Vue 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
<div id="app"> <h1>网站列表</h1> <div v-for="site in info" > {{ site.name }} </div> </div> <script type = "text/javascript"> const app = { data() { return { info: 'Ajax 测试!!' } }, mounted () { axios .get('https://www.mytest123.com/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function (error) { // 请求失败处理 console.log(error); }); } } Vue.createApp(app).mount('#app') </script>