01-引入vuejs、v-指令、计算属性computed和观察者watch、表单、v-show、v-if

vuejs2

官方文档

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

sublime text3 安装vue插件

支持VueJS语法高亮显示插件vue syntax hightlight

https://github.com/henjue/vue-for-idea.git

https://github.com/postalservice14/vuejs-plugin

1.0 html文件中引入vue

*.html文件中引入vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.0 声明式渲染和vue命令

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {
  { message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

bind/baɪnd/捆绑

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。

vue命令格式：v-“命令名” = ‘命令值’,v-once数据被赋值后无论绑定的数据被如何修改都不会引起该绑定元素的更新

2.1 文本插值使用双大括号语法 { {js表达式}}

• 在vue示例绑定的DOM中,可以使用双大括号语法进行文本插值

• 双大括号{ {}}语法内部可以使用js表达式：变量、三元运算符、基本运算

• 双大括号语法,将插值内容自动转化为文本节点,避免XSS攻击

<div id=app>
    声明式渲染
    <h2 v-once>title{
  {title}}</h2><!--虎扑体育-->
    <div>title{
  {title}}</div><!--title虎扑体育-->
    <p>{
  {msg}} msg: vue.data.msg</p><!--hello world msg: vue.data.msg-->
    <p>三元运算符：{
  {num > 6 ? '大' : '小'}}</p><!--三元运算符：小-->
    <p>运算：{
  {num + 15}}</p><!--运算：21-->
    <pre>
        {
  {htmlStr}}<!-- <div>hello world</div>-->
    </pre>

2.2 属性插值 v-bind:属性名=“js表达式”

    处理用户输入
    <input v-bind:placeholder="holderStr">
    <input v-bind:placeholder="usepsd? '请输入密码':'请输入用户名'">
</div>
{
  {msg}}在#app外使用无效

2.3 实例化vue 绑定页面元素

var vm = new Vue({
   
    el: '#app',// css选择器 绑定页面中的元素,该元素就会被转化为Vue根示例,在该DOM中可以使用Vue示例的方法属性语法等
    data: {
   
        // data 是vue中用来存放数据的配置选项,data必须是一个纯对象其中包含一个或多个键值对
        // Vue 将会递归将 data 的属性转换为 getter/setter (当属性发生改变时响应式的更新页面ui)
        //  通过vue示例对象 vm.$data 获取到其中的数据
        msg: 'hello world',
        num: 6,
        title: '虎扑体育',
        htmlStr: '<div>hello world</div>',
        holderStr: "测试属性插值",
        usepsd: true
    }
})
// document.body.innerHTML += '<h1>hello world</h1>'
console.log(vm.$data, vm.msg)// 'hello world'

v-bind:属性名 可以缩写为:属性名

<span :class="className">v-bind</span>

2.4 v-html属性将原生html节点插入页面中

该方法会引起xss攻击,所以要注意不要将该方法暴露给用户(v-html自带v-bind)

<p v-html="htmlstr"></p><!--使用v-html-->

2.5 双向绑定 v-model=“vue中属性”

实现数据双向改变

该方法只适用于表单元素,首先通过v-bind将对应的data与input的value进行绑定
,给input添加修改事件当value发生改变时修改vue的对应data数据

<input v-model="value">{
  {value}}

var vm = new Vue({
   
    el: "#app",
    data: {
   
        htmlstr: '<span style="color:red">使用v-html</span>',
        className: 'demo',
        value: 'hello'
    }
})

4.0 computed计算属性和Watch观察者

例子: 如果页面中需要一些对vue示例data进行某种操作的数据,可以通过js表达式对data进行处理

​ 但是如果页面中多处地方都需要该操作或者数据处理过于复杂,写在文本或属性插值中会让代码变得繁杂

​ 下面例子中 h2 p div 等标签需要同样的操作,我们发现我们在项目中创建了多个重复的代码,vue为我们提供

了两种解决方法

​ 方法一 计算属性 computed

​ 方法二 观察者 watch

解决重复多余的代码变得简单

4.1计算属性computed

computed /kəm’pju:tid/计算

reverse/rɪ’vɜːs/相反的

join/dʒɒɪn/连接

<div id="app">
    实现反转字符串：
    <input v-model=str>
    <h2>{
  {str.split('').reverse().join('')}}</h2>
    <h3>{
  {str.split('').reverse().join('')}}</h3>
    <h4>{
  {str.split('').reverse().join('')}}</h4>
    
    <h5>计算属性：{
  {reverseStr}}</h5>
    <h6>计算属性：{
  {reverseStr}}</h6>
</div>

var vm = new Vue({
   
    el: '#app',//绑定页面元素
    data: {
   
        str: 'hello world'
    },
    computed: {
   
        // 计算属性是Vue配置选项computed中定义的必须带return值的函数,
        // 函数名就是计算属性名,使用时与普通属性相同
        // 字符串反转的计算属性
        reverseStr() {
   
            // 在当前计算属性中用到的data或者其他计算属性,会被作为依赖,计算属性会监听这些依赖
            // 当依赖改变时,计算属性会重新计算
            return this.str.split('').reverse()