vue.js之入门第一篇（HelloWorld+创建Vue项目）
2019-03-09 本文已影响0人
平安喜乐698
目录
一款渐进式框架（对html、css、javascript进行了封装，便于更快捷方便地构建网页）。
数据双向绑定、自定义组件
引入Vue.js
在 html文件的head标签内
方式一
下载vue.min.js导入项目，并通过<script src="相对路径"></script>本地引入
下载地址：https://vuejs.org/js/vue.min.js
方式二
国内1
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
国内2
<script src="https://unpkg.com/vue/dist/vue.js"></script>
国内3(学习，新版本)
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
国内4(生产模式下，建议指定版本号，避免新版本造成不可预料后果)
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>
国外1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
- Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p> <!--使用 属性-->
<p>{{ sex }}</p> <!--使用 属性-->
<p>{{ boy() }}</p> <!--使用 方法-->
</div>
<script>
new Vue({ <!--实例化一个Vue-->
el: '#app', <!--对应上面的div（的id），仅影响对应div-->
data: { <!--存放 属性-->
message: 'Hello World!',
sex: 'boy',
},
methods: { <!--存放 方法-->
boy: function() {
return this.sex + " 男子汉大丈夫！";
},
}
})
</script>
</body>
</html>
运行结果
获取属性并修改
<script>
var data = { message: 'Hello World!',sex: 'boy',age: 10000}
var vm = new Vue({
el: '#app',
data: data
})
vm.message = "Hello"
data.age = 999999
document.write(vm.message === data.message) // true
document.write(vm.$data === data) // true 引用的是同一个对象
document.write(vm.$el === document.getElementById('app')) // true
</script>
说明：
1、当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。创建Vue之后再添加的属性则不会如此，可以在data中预先设置。
2、Object.freeze(变量) 可阻止其被修改
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
3、$前缀
实例属性：
vm.$el
实例方法：
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
4、绑定文本
{{message}}
实现数据绑定，当message发生变化时会更新界面。
支持JS表达式，不支持语句
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量
<span v-once>一次性插值，message发生变化后不会更新 {{ message }}</span>
5、绑定html（很容易导致XSS 攻击)
<span v-html="rawHtml"></span>
6、给html元素绑定属性
<div v-bind:id="dynamicId"></div>
当isButtonDisabled的值为null、undefined 或 false时，该v-bind不会在button中渲染
<button v-bind:disabled="isButtonDisabled">Button</button>
- 创建Vue项目
搭建环境
安装 cnpm
npm install cnpm -g
安装 vue-cli
cnpm install --global vue-cli
创建项目并运行
创建项目（基于 webpack 模板。项目名必须全小写。一直回车。）
vue init webpack my-project
运行项目
cd my-project
cnpm install
cnpm run dev
浏览器输入http://localhost:8080，显示结果如下
运行结果
项目结构
项目结构说明
build 项目构建(webpack) 相关代码
config 配置目录，包括端口号等。
index.html 首页入口文件，可以添加一些 meta 信息或统计代码。
node_modules npm加载的项目依赖模块
package.json 项目配置文件
README.md 项目的说明文档，markdown 格式
src 程序员开发的目录。包含了：
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用components 目录。
assets: 放置图片
components: 放了一个组件文件，可以不用。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
- 牛刀小试（修改组件内容 重新运行）
1、修改App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<!-- 修改部分 start -->
<hello></hello>
<!-- 修改部分 end -->
</div>
</template>
<script>
<!-- 修改部分 start -->
import Hello from './components/HelloWorld'
<!-- 修改部分 end -->
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2、components文件夹下修改HelloWorld.vue,编辑内容如下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'HelloWorld！'
}
}
}
</script>
运行结果
Vue的生命周期
Vue的生命周期
new Vue({
data: {
a: 1
},
created: function () { // 实例被创建之后调用
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
// 其他方法
})
