简介
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
环境安装
环境准备: node
npm
vue-cli
vue-devtools
nvm安装: 用来管理node版本
下载chrome 插件地址: https://chrome-extension-downloader.com/
BootCDN: https://www.bootcdn.cn/
模板语法
- vue 文件结构(template,script, style)
- 插值语法 { {msg}}, 数据, js表达式
- 指令(指令缩写)@click :href
Title
hello world! {
{msg}}
{
{msg}}
{
{count}} {
{(count + 1)*10}} 数字加1
计算属性与侦听器
- 计算属性: conputed
- 侦听器: watch
侦听器:
给Vue 对象一个变量,这样就可以在chrome console 里进行调试了,下面是针对watch属性的一个使用调试:
当改变app.msg的值后,就会调用watch 对应的function函数,打印相关信息
app.msg"hello vue!!"app.msg = "new message!!"index.html:49 newVal is:new message!!index.html:50 oldVal is:hello vue!!"new message!!"
计算属性
computed 中的相关属性任意值发生变化都会影响msg1值的变化
监听的值都是本实例中的值
watch: { msg: function (newVal, oldVal) { console.log('newVal is:' + newVal)