Catherine 成长记第三篇

vue 操作流程

vue简介
作用：写前端的，是当前最火的三个前端框架之一
优点：简单、易学、免费
作者：尤雨溪，江苏

src目录下
assets 存放静态文件
components 存放组件的
router 写路由的
app.vue 主页配置
main.js 全局配置

vue 运行步骤
【1】.先检查是否在项目里
【2】.运行一遍项目
命令：npm run dev 如果不在项目里，会报4058
报错格式：This is related to npm not being able to find a file.
如果在项里，会出现一个网址，建议使用谷歌浏览器
【3】创建一个新的组件，不要以数字开头，不能使用关键字，使用数字，字母，下划线，不建议使用汉字
【4】组件里由三部分组成
1.template------写html的
2.script--------写js的，包括页面的内容，写在花括号里
data(){
return{
name:“蒋万旗” #要以键值对格式
}
}
3.style-----------写css
【5】配路由，在index.js里
格式：{
path: ‘/网址的地址’,
name: ‘vue文件名’,
component: vue文件名
}
注意：如果上面没有自动导包，要手动在component导包，alt+ent

跳转网页： 注意：只能在html里面使用
全局路由对象：this.$router.push(“网名后缀名”) router被称为全局理由对象，push就是对象中的方法，将要去的网址写入push，实现路由跳转 注意：只能在js里面使用
【v-for】循环中，建议使用key属性绑定，区分每条数据
举例:

{{i.id}} {{i.name}} {{i.price}} {{i.cate}} 【v-text】 ----------只解析文本 【v-html】---------能解析html标签 【v-if】-------------本质是对元素的创建与销毁，条件成立，创建对应元素，条件不成立，销毁对应元素，大量的使用v-for，会加据系统资源的消耗 【v-show】元素始终存在，只是通过修改display属性，让元素是否显示 【v-on】----------会将click事件和方法btn进行绑定，一旦触发click事件，会自动执行btn方法 【v-model】函数中的数据，会和表单中用户输入的数据进行关联，任何一方改变，另一方随之改变 作用：为了获取用户输入的数据 举例：

男 女 人妖 保密

你的性别是:{{gender}}

<input name="fruits" type="checkbox" v-model="fruits" value="apple"> 苹果
<input name="fruits" type="checkbox" v-model="fruits" value="orange"> 橘子
<input name="fruits" type="checkbox" v-model="fruits" value="peer">梨
<input name="fruits" type="checkbox" v-model="fruits" value="strawberry">草莓
<h3>你最爱的水果是:{{fruits}}</h3>
<h3>请选择你的省份: </h3>
<select name="province" v-model="province">
  <option value="河南">河南</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
</select>
<h2>你的省份是:{{province}}</h2>

js中字符串倒序，分为三步：切分、倒序、拼接
举例：{{msg.split("").reverse().join("")}}

三种渲染数据的方式:
{{}}-------插式表达式
v-html------能解析html标签
v-text ----------只解析文本

冒泡机制：
当元素相互嵌套时，点击内层元素，会从内向外触发所有元素的点击事件，这种机制被称为冒泡事件
【事件修饰符】：

.stop 阻止冒泡事件
.self 只有点击元素自身才会促发事件，被传递的事件并不会触发
.capture 哪个元素拥有这个修饰符，就优先执行对应方法，其余元素还是按照冒泡事件从内向外依次触发。

单独使用：
.once 事件只能被触发一次
.prevent 阻止事件的默认行为
举例：

属性绑定：
v-bind：将data中的数据和标签的属性进行关联，通过修改data中的数据，
就可以动态修改属性值，可以缩写成:(冒号)，v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。
Vue官方提供了一个简写方式 :bind，例如：

举例：

{{msg}}
<button @click=“btn”>按钮

  <p class="cid">段落</p>
  <!--使用属性绑定，class属性值会随着变量cid的值改变而改变-->
  <p v-bind:class="cid">段落</p>
  </div>

样式绑定：
class绑定：
举例：

你害怕大雨吗？

你害怕大雨吗？

你害怕大雨吗？

你害怕大雨吗？

style绑定：
举例：

绿绿的

<p v-bind:style=“obj” @click=“chang”>红红的

ES5中，声明变量，使用var关键字，变量可以多次声明和修改 例如：var a=10； var a=20;
ES6中，声明变量，使用let关键字，变量只能声明一次，但可以多次修改， 例如：let=10；a=20；
ES6中，声明常量，使用const关键字，常量只能声明一次，值不可修改， 例如：const c=10;
主流的js版本，就是Es6,ES6又被称为ES2015；
循环求总价练习：

{{goods.id}}

{{goods.name}}

{{goods.price}}

{{goods.count}}

{{ amount() }}

computed(计算属性)：计算属性，当原始数据不改变，只需要计算一次，然后会缓存计算结果，下次使用时，不需要重新计算，直接读取数据改变，需要重新计算
代码实现：

{{goods.id}}

{{goods.name}}

{{goods.price}}

{{goods.count}}

{{ “总价是:”+btd }}

watch(监听属性):监听属性中的方法名和要监听的数据一样方法有两个参数，第一个参数为变化后的新数据，第二个参数为变化前的旧数据
举例：

<button @click=“btn”>{{n}}

{{m}}

vue嵌套：创建一个新的vue，使用components把嵌套的两个网页后缀名写上去就实现了，第一步创建components方法，里面写下文件名，第二步导包，第三步在html里面添加第一步方法里面的文件名标签！
代码实现：

过滤器（filters）：过滤器本质是一个函数。最少需要一个参数，过滤器只可以在插值表达式和v-bind后面的表达式中使用，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
举例：
{{ message | capitalize }}

创建基本样式
使用v-bind实现样式动态绑定
定义过滤器， 实现样式过滤
代码实现：

钩子函数：8大步骤
vue实例对象一系列声明周期 分为八个阶段
vue对象想在某个周期做一些事情，就需要钩子函数
钩子函数类似于 python 的魔法方法，自动触发调用
1.beforCreate 创建之前 2. created 创建之后
3.beforeMount 挂载之前 4. mounted 挂载之后
5.beforeUpdated 更新之前 6.updated 更新之后
7.beforeDestroy 销毁之前 8.destoryed 销毁之后