vue 获取div_Vue基础笔记(上)

Vue实战

1. Vue 引言

渐进式 JavaScript 框架   --摘自官网

 # 渐进式   1. 易用  html css javascript   2. 高效  开发前端页面 非常高效    3. 灵活  开发灵活 多样性# 总结    Vue 是一个javascript 框架# 后端服务端开发人员:     Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定  双向绑定 MVVM      注意: 日后在使用Vue过程中页面中不要在引入Jquery框架    htmlcss--->javascript ----->jquery---->angularjs -----> Vue  # Vue 作者     尤雨溪   国内的    

---

2. Vue入门

2.1 下载Vuejs

 //开发版本:    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//生产版本:    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

   <div id="app">        {
    { msg }}  {
    {username}} {
    {pwd}}        <br>        <span>            {
    { username }}            <h1>{
    { msg }}h1>        span>   div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({
                el:"#app",  //element 用来给Vue实例定义一个作用范围            data:{      //用来给Vue实例定义一些相关数据                msg:"百知欢迎你,期待你的加入!",                username:"hello Vue!",                pwd :"12345",            },        });    script>

 # 总结:      1.vue实例(对象)中el属性: 代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法      2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{
    {变量名}}在Vue作用范围内取出      3.在使用{
    {}}进行获取data中数据时,可以在{
    {}}中书写表达式,运算符,调用相关方法,以及逻辑运算等      4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

---

3. v-text和v-html

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部             类似于javascript 中 innerText

     <div id="app" class="aa">        <span >{
    { message }}span>        <span v-text="message">span>    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({
                el:"#app",            data:{
                    message:"百知欢迎您"            }        })    script>

 # 总结      1.{
    {}}(插值表达式)和v-text获取数据的区别在于           a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据          b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部  类似于javascript中 innerHTML

 <div id="app" class="aa">        <span>{
    {message}}span>        <br>        <span v-text="message">span>        <br>        <span v-html="message">xxxxxxspan>    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({
                el:"#app",            data:{
                    message:"百知欢迎您"            }        })    script>

---

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

     <div id="app">