vue 学习笔记整理
1.整理一：
-
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true
模板语法：
-
插值：v-once：执行一次性的插值；
v-html：将元素插值解析成html格式 -
Attribute（属性）：
v-bind：绑定data里面的属性
对于布尔 attribute（指令） (它们只要存在就意味着值为 true)，v-bind 用于绑定 在这个例子中：<button v-bind:disabled="isButtonDisabled">Button</button>此时isButtonDisabled这个data属性是一个变量可以解析成表达式，如果要加内容直接+'字符串’在后面
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的元素中。动态参数<a v-bind:[attributeName]="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href
-
要避免用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写；
<!--在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。 --> <a v-bind:[someAttr]="value"> ... </a> -
v-on 监听dom事件
-
缩写：
v-bind: <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a> v-on同上。“：”改成“@” -
计算属性：
对于任何复杂逻辑，你都应当使用计算属性。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
相当于一个函数名先摆着 ，再在下面具体实现；<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) //结果 Original message: "Hello" Computed reversed message: "olleH"对比：
<p>Reversed message: "{{ reversedMessage()}}"</p> // 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }区别：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
而method会多次执行；
响应式依赖：Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。 -
侦听属性：watch：
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。<div id="demo"> <input v-model="demo"> {{message}} </div> <script> var vm = new Vue({ el: '#demo', data() { return { demo: '', message: 'hi' }; }, watch: { demo: function (val) { this.message = val + this.demo; } } }); </script>努力分析了一波computed和watch区别；watch是监听单个变量的变化，一个变量变只能引起一个函数变；而在computed中只需要data中任意变量有变化就会触发（有依赖变化）计算属性中函数变化，且有缓存，计算时会省事。
众所周知，vue中computed为计算属性，计算属性是一种带有行为的属性，本质上是方法，但是不能调用。而需要重新渲染时使用methods中的方法会重复调用执行函数，若函数复杂，浏览器性能会降低。使用computed则会缓存计算结果，避免重复计算，从而提高效率。computed中的get方法可简单理解为取值时调用此方法，而set则为重新赋值时调用。（构造器，setter 赋值，getter读值）<div id="app"> <div id="demo">{{ fullName }}</div> </div> <script> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: { // getter get: function () { console.log('get') return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { console.log('set') var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } }) </script> //当firstName 和lastName改变时 会执行getter //当fullName改变时，会执行setter，再执行getter(因为改变了)
侦听器：
watch侦听一个属性，进行一个异步操作，当异步未完成时，有一个中间态，完成后又有一个状态
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...' //中间态
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
//完成后返回的值
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
工程脚手架搭建过程：
- 创建 vue create hell-world（可图形化创建过程 vue ui）
- 安装element-ui插件 npm i element-ui -S
- 在要用api时 先关闭终端 再 npm install vue-resource --save
630到此
2.整理二：
- 基本语法：
-
函数
{{greet()}} //形式一： new Vue({ el: "#vue-app", //element 要操作哪一个元素对象 data() { //本身是函数，返回对象 return { name: "joanne", qq: '854674261' }; }, methods: { greet: function () { return 'Good night' + this.name; } } }); //形式二： methods: { greet() { return 'Good night' + this.name; } } //形式三（es6）： greet() { return `Good nignt ${this.name}`; } -
属性绑定：
<a v-bind:href="website">baidu</a> data() { //本身是函数，返回对象 return { name: "joanne", qq: '854674261', website: 'https://www.baidu.com' }; }也可直接简写成“：”
插入一个a标签
<p v-html="websiteTag"></p> websiteTag: "<a href='https://www.baidu.com'>baidu</a>", -
双向数据绑定 v-model
<div id="canvas"> <h1>双向数据绑定 input/select/textarea</h1> <label>姓名</label> <input type="text" v-model="name" /> <span>{{name}}</span> </div> new Vue({ el: "#canvas", //element 要操作哪一个元素对象 data() { //本身是函数，返回对象 return { name: "", }; }, -
目录介绍
- README.md 里面是命令介绍
npm install //安装项目所需要的依赖包
npm run build//变成压缩包 - package.json
- scripts 告诉我们项目的启动方式
- dependencies 必须依赖的东西和插件
- package-lock.json 没有用到 可以删
- babel.config.js //可能会用到的语法做一些转换、配置。
- .gitignore 忽略某些文件
- Public 主入口文件：
第一个是图标 title边上的 想改图标就再命名为这个就行
第二个是主页 我们要用的 - Node_modules 是安装的东西，没有的话运行不起来
点cnpm install 安装 这个一般打包给别人不传 需要他自己点这个安装好 - Src中
Assets 静态文件 包含图片 css js
Components 对应的组件 大写字母开头 驼峰命名 .vue结尾
js部分 逻辑部分 - app.vue 根组件
- main.js 逻辑入口文件 会直接运行 与前面index.html配对
- README.md 里面是命令介绍
-
3.学习
v-clock能够解决插值表达式闪烁问题
默认v-text没有闪烁问题 但v-text会覆盖元素中原本的内容，插值表达式只替换占位符，不会把整个元素清空
- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
- v-on 绑定函数
- v-bind 绑定元素 //v-bind:属性=“为他属性绑定动态的值”
- v-model 双向数据绑定
- v-html 使用真正html
- v-show和v-if都是展示元素，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display，注意：v-show 不支持 template 元素，也不支持 v-else。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
<p>Using mustaches: {{ rawHtml }} </p> //原样
<p>Using v-html directive: <span v-html="rawHtml"></span></p> //html格式
- 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
- 插值上的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>
- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。？
用于为一些来源不可信、具备破坏力或无法判定程序意图的程序提供试验环境。然而，沙盒中的所有改动对操作系统不度会造成任何损失。通常这种技术被计算机技术人员广泛使用，尤其是计算机反病毒行业，沙盒是一个观察计算机病毒的重要环境。影子系统即是利用了这种技术的软件之一。
有时沙盒也叫沙箱，英文sandbox。在计算机领域指一种虚拟技术，且多用于计算机安全技术。其原理是通过重定向技术，把程序生成和修改的文件定向到自身文件夹中。当某个程序试图发挥作用时，安全软件可以先让它在沙盒中运行，如果含有恶意行为，则禁止程序的进一步运行，而这不会对系统造成任何危害。
- 动态参数：
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
//在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
-
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
-
Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即代表完全不同的，不能复用。
-
vue变异方法，非变异方法
//非变异filter（）
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
- 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化
1192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
