Vue
前端-vuejs-之父尤雨溪
Vue 官网地址：https://cn.vuejs.org/
谷歌浏览器chrome的vuejs devtools插件安装
参考资料：https://www.cnblogs.com/alice-fee/p/8038367.html
如何快速的上手vuejs呢？
1. html页面 引入 vuejs
npm install vue 下载包
//第一种方式npm包管理引入 <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <!-- 使用 npm 下载的包 存在 1. src 目录（soruce），一般是源码目录，不能直接用，需要编译 2. dist 目录，存放编译后的文件的目录 这个才是可以使用的。 dist（distaination 目的地 2. distribution 分布、发布）--> //第二种方式下载引入js文件 <script type="text/javascript" src="js/vue.js"></script>
2. 定义一个 vuejs 管理的区域（使用 vuejs 提供的语法进行操作 vuejs 没有DOM）
注意：管理区域说白了就是一个DOM区域，但是不能是 html 或者 body 区域
<!-- 一般管理的区域叫做 app 或者 box -->
<!-- V 视图 -->
<div id="app">
<!-- 这个区域 vuejs 管理 写vuejs特定的代码 插值表达式 指令 -->
<h2>{{ title }}</h2>
<hr>
<p>{{ infos }}</p>
<!-- 现在的视图展示数据 -->
<hr>
<!-- 方式二： 视图-模型 -->
<input type="text" v-model="username">
<hr>
<!-- 方式一： 模型视图 -->
<p>{{ username }}</p>
</div>
<div>
<h2>不在 vuejs 管理的区域</h2>
<p>{{ username }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// vuejs 是一个 MVVM 框架
// M Model V 代表视图 VM 代表 ViewModel Vuejs提供
// Model模型
var obj = {
// 视图里面 插值表达式 写的就是 Model里面的属性，直接，一般叫做 模型变量
title: '标题',
infos: '信息',
username: 'default UserName'
};
// VM Controller
var vm = new Vue({
el: '#app', // 值就是 css选择器，ID选择器
data: obj, // 代表和Model产生关系
}); // 接受参数：对象 1. el(element) 2. data 属性
console.log( vm );
</script>
3. 进行 vuejs 代码调用
注意： 当引入 vuejs 全局内暴露出来一个 Vue 构造函数
案例实现：输入数字计算值
<body> <!--2. 定义vuejs管理区域--> <div id="box"> <p>运费：每公斤 10 元</p> 重量：<input type="number" id="number" v-model="number">KG <br> 总价：<b id="total">{{ number * 10 }}</b> </div> </body>
//第一种原生实现： <script type="text/javascript"> // 1. 事件监听 DOM操作 $("#number").keyup(function () { // 2. 业务逻辑 DOM操作 var number = parseInt($(this).val()); // this.value;// var total = number * 10; // 3. 还是DOM操作 $("#total").html( total ); }) </script> //第二种：Vuejs 操作实现无DOM <script type="text/javascript"> 使用 vuejs 编写代码 new Vue({ el: '#box', data: { number:0, } }) </script>
vuejs模型学习
1. 基本类型数据展示 string number boolean undefined null
HTML部分: <div id="box"> <p>{{ string1 }}</p> <p>{{ number1 }}</p> <p>{{ boolean1 }}</p> <p>{{ unkown1 }}</p> </div> Javascript部分: new Vue({ el: '#box', // 可以这样理解 data 就是 Model data: { // data 里面的属性一般叫做 模型变量，可以在视图里面 进行调用 // 1. 基本数据类型 string1: 'lorem hi vuejs', number1: 13, boolean1: false, unkown1: undefined, unkown2: null } });
2.复合数据类型展示(引用数据类型) Object Array
vuejs 提供一种模板引擎语法，叫做插值表达式 {{ '插值表达式' }}
插值表达式里面可以写什么东西？ 表达式： 1. 模型变量 2. 可以一些一些简单js语法 三目 字符串的拼接
复合数据类型的展示
1. 获取单个值 2. 遍历 for()循环 vuejs 提供了一个类似 v开头的东西，叫做 指令
数组类型：
HTML部分： <div id="box"> 第一种取单值：
<p>{{ array1 }}</p> <p>{{ array1[0] }}</p> <p>{{ array1[1] }}</p>
第二种遍历：取下标和值
<ul>
<!--for(var attr in obj) for...in 遍历对象的属性，但是 vuejs 可以 v-for 语法遍历 数组对象-->
<li v-for="(ele,index) in array1">下标：{{ index }}， 值：{{ ele }}</li>
</ul>
</div> Javascript部分： <script type="text/javascript"> new Vue({ el: '#box', data: { array1: [12, 23, 34, 45] } }）；
</script>
对象Object：
HTML部分： <div id="box">
取单值：
<p>{{ obj1['name'] }}</p>
取出值和下标 <ul>
<li v-for="(value,attr,index) in obj1">属性名称：{{ attr }} 属性的值：{{ value }} 下标：{{ index }}</li>
</ul>
</div>
Javascript部分：
<script type="text/javascript">
new Vue({
el: '#box',
data: {
obj1: {
id: 1, name: 'andy',
address: 'shenzhenshi'
}
}）；
</script>
数组对象型：
HTML部分： <div id="box"> <ul v-for="ele in objArray"> <li>序号：{{ ele.id }}</li> <li>用户名：{{ ele.name }}</li> <li>住址：{{ ele.address }}</li> </ul> </div> Javascript部分： <script type="text/javascript"> new Vue({ el: '#box', data: { objArray: [ {id: 12, name: 'lilei', address: 'shenzhen'}, {id: 23, name: 'mark', address: 'guangzhoushi'} ]}； }） </script>
注：以上均引用vue.js
1. 什么是指令？
指令是作为元素的属性而出现，扩充了html原本的属性 name id class。
for(var attr in obj) for...in 遍历对象的属性，但是 vuejs 可以 v-for 语法遍历 数组对象
例如
<li v-for="(ele,index) in array1">下标：{{ index }}， 值：{{ ele }}</li>
<li v-for="(value,attr,index) in obj1">属性名称：{{ attr }} 属性的值：{{ value }} 下标：{{ index }}</li>
插值表达式里面到底可以写那些东西？
1. 模型变量
2. 条件表达式
3. 四则运算 +-*/
4. 逻辑运算 && || ！
5. js特殊运算， +
6. 字面量-
7. 自定义的全局 函数 没办法使用
8. ECMAScript定义函数 Math.random()
9. 不能写语句