0.vue项目式hello world
大致可以按照以下步骤
安装node.js,之后就可以在命令行中使用npm命令
npm install vue, 安装vue
npm install vue-cli -g , 全局安装vue-cil
npm install webpack -g,全局安装webpack
如果速度比较慢的话,可以使用命令
npm config set registry https://registry.npm.taobao.org
这样可以将npm 永久改为淘宝源
vue init webpack ”项目名称“,一路yes
npm install
npm run dev
这样就生成了一个hello world项目,不过此次部分学习笔记不会记录vue项目式相关的内容
1.在html导入vue
在head标签中导入
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
我的话是把vue文件下载到本地进行导入,两种方法都可以
<head>
<script src="./vue.js"></script>
</head>
2. 声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<body>
<div id="app">
<!-- {{ }}是vue的语法,用于输出对象属性和函数返回值,
里面不仅可以写js变量, 还可以写一些简单的表达式,比如三目运算符,累加等等,
当里面写方法的时候,必须要在vue的methods中声明。 -->
{{ content }}
</div>
<script>
let app = new Vue({
// el提供一个在页面上已存在的 DOM 元素
// 作为 Vue 实例的挂载目标。
// 此处div id = "app",
// el:'#app'将id为的app的DOM元素作为挂在目标
el: '#app',
data: {
// 对应div 标签中的 content
content: 'hello world'
}
})
</script>
</body>
3.操作vue的内部对象
如果我们想要更改content的内容,有什么办法呢?最简单的方法是在vue中添加method方法,不过这个放在之后再说,此处先说用原生的js如何对vue内部对象进行操作。
我们可以将script标签中的代码改写为如下所示
let app = new Vue({
el: '#app',
data: {
content: 'hello world'
}
})
setTimeout(function() {
app.$data.content = 'bye world'
}, 1000)
setTimeout这个官方函数的效果是经过多少ms后,调用里面的function。
app比较好理解,因为我们使用let声明了一个名为app的vue对象。但是$是怎么回事呢?
其实$的话,看文档的介绍,是内部函数的一种特殊命名方式。data是vue的内部函数,此外还有method,computed等内部函数,他们前面都需要加上$,这样可以最大程度的和用户的自定义的属性区分开来。
不过之后我们大概率不会用这种方式对vue的内部数据进行处理,此处这样写只是为了$这个知识点